如何在没有按钮的情况下实现显示隐藏 JavaScript

Question

我对显示和隐藏有疑问我正在使用 bootstrap 但我不明白如何使用显示和隐藏，我尝试的是当名称为 select ed 仅显示该面板，而其他面板保持隐藏状态，当您关闭面板时，其他隐藏的面板将再次显示，当您 select 另一个面板而不是第一个隐藏面板时，其他面板只显示打开的面板

这里是代码：

<div class="container">
<h2>Our Attorneys</h2>
<div class="panel-group">
    <div class="panel panel-default" id="drop1">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse1">Ricardo Aguirre M.</a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
            <ul class="list-group">
                <li class="list-group-item" style="color: black;">
                    <p>
                        text
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default" id="drop2">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse2">Abel Chávez S.</a>
            </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
            <ul class="list-group">
                <li class="list-group-item" style="color: black;">
                    <p>
                        text
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default" id="drop3">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse3">Angelly Wendy González F.</a>
            </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse" style="color: black;">
            <ul class="list-group">
                <li class="list-group-item">
                    <p>
                     text
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default" id="drop4">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse4">Erick Garcia C.</a>
            </h4>
        </div>
        <div id="collapse4" class="panel-collapse collapse" style="color: black;">
            <ul class="list-group">
                <li class="list-group-item">
                    <p>
                        text
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default" id="drop5">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse5">María Guadalupe Vargas A.</a>
            </h4>
        </div>
        <div id="collapse5" class="panel-collapse collapse" style="color: black;">
            <ul class="list-group">
                <li class="list-group-item">
                    <p>
                        <p>
                           text
                        </p>
                    </p>
                </li>
            </ul>
            <%--<div class="panel-footer">Footer</div>--%>
        </div>
    </div>
</div>

和地区：

<script>
$(document).ready(function(){
    $("#drop1").click(function () {
        $("drop2").hide();
        $("drop3").hide();
        $("drop4").hide();
        $("drop5").hide();
    },
    function () {
        $("drop2").show();
        $("drop3").show();
        $("drop4").show();
        $("drop5").show();
    });

    $("#drop2").click(function () {
        $("drop3").hide();
        $("drop4").hide();
        $("drop5").hide();
        $("drop1").hide();
    },
    function () {
        $("drop3").show();
        $("drop4").show();
        $("drop5").show();
        $("drop1").show();
    });
    $("#drop3").click(function () {
        $("drop1").hide();
        $("drop2").hide();
        $("drop4").hide();
        $("drop5").hide();
    },
    function () {
        $("drop1").show();
        $("drop2").show();
        $("drop4").show();
        $("drop5").show();
    });
    $("#drop4").click(function () {
        $("drop2").hide();
        $("drop3").hide();
        $("drop1").hide();
        $("drop5").hide();
    },
    function () {
        $("drop2").show();
        $("drop3").show();
        $("drop1").show();
        $("drop5").show();
    });
    $("#drop5").click(function () {
        $("drop2").hide();
        $("drop3").hide();
        $("drop4").hide();
        $("drop1").hide();
    },
    function () {
        $("drop2").show();
        $("drop3").show();
        $("drop4").show();
        $("drop1").show();
    });
});
</script>

我很困惑。

Answer 1

只需加载 bootstrap 和 jquery ，无需使用 javascript

隐藏或显示

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>
    
</body>
</html>

Answer 2

如果我理解正确，当你点击一个 name/panel 你想切换另一个 panels/names 的可见性，然后 show/hide 基于点击它。

如果这是愿望，那么只需将类与此一起使用：

$(document).ready(function() {
  $('.panel-group').on('click', '.panel', function() {
    $(this).siblings().toggle();
  });
});

如何在没有按钮的情况下实现显示隐藏 JavaScript

How to implementing Show Hide JavaScript without buttons

javascript

jquery

show-hide

twitter-bootstrap