如何在没有按钮的情况下实现 Show Hide JavaScript

Question

I have a doubt as to show and hide I'm using bootstrap but I can not understand how to use the show and hide, what I try is that when the name is selected show only that panel while the other panels are kept隐藏，当您关闭面板时，其他隐藏的面板会再次显示，并且当您选择另一个面板而不是第一个为其他人隐藏时，仅显示该打开的面板

这里是代码：

<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

如果我理解正确，当您单击一个名称/面板时，您希望切换其他面板/名称的可见性，然后根据单击显示/隐藏。

如果这是愿望，那么只需使用以下类：

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

Answer 2

只需加载 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>