时间戳

首页 > 解决方案 > 在 mvc 视图中显示/隐藏文本区域

javascript - 在 mvc 视图中显示/隐藏文本区域

问题描述

当我单击每个链接时，我想要显示/隐藏三个文本区域。我可以在单击链接时显示它，但在单击链接时无法隐藏它。

jQuery：

      <script>
        $('#responsibilityLink').click(function () {
        $('#div1').show();
       });

    $('#descriptionLink').click(function () {
        $('#div2').show();
    });

    $('#responseLink').click(function () {
        $('#div3').show();
    });

   </script>

html:

       <div class="row">
                    <div class="col-md-2">
                        <a id="responsibilityLink" 
              href="#">Responsibility</a>
                    </div>
                    <div id="div1" style="display:none" class="col-md-12">
                        <div>
                            <div id="editor"></div>
                            <textarea name="Responsibility"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-2">
                        <a id="descriptionLink" href="#">Description</a>
                    </div>
                    <div id="div2" style="display:none" class="col-md-12">
                        <div>
                            <textarea name="Description"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-2">
                        <a id="responseLink" href="#">Add Response</a>
                    </div>
                    <div id="div3" style="display:none" class="col-md- 
                  12">
                        <div>
                            <textarea name="Response"></textarea>
                        </div>
                    </div>
                </div>

该节目有效，但是当我单击每个链接时如何隐藏文本区域？

标签： javascriptasp.net-mvc

解决方案

尝试使用切换，它会在显示/隐藏元素之间来回切换：

        $('#responsibilityLink').click(function () {
        $('#div1').toggle();
       });

    $('#descriptionLink').click(function () {
        $('#div2').toggle();
    });

    $('#responseLink').click(function () {
        $('#div3').toggle();
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
                    <div class="col-md-2">
                        <a id="responsibilityLink" 
              href="#">Responsibility</a>
                    </div>
                    <div id="div1" style="display:none" class="col-md-12">
                        <div>
                            <div id="editor"></div>
                            <textarea name="Responsibility"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-2">
                        <a id="descriptionLink" href="#">Description</a>
                    </div>
                    <div id="div2" style="display:none" class="col-md-12">
                        <div>
                            <textarea name="Description"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-2">
                        <a id="responseLink" href="#">Add Response</a>
                    </div>
                    <div id="div3" style="display:none" class="col-md- 
                  12">
                        <div>
                            <textarea name="Response"></textarea>
                        </div>
                    </div>
                </div>

推荐阅读