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

Question

我对显示和隐藏有疑问，我正在使用 Bootstrap ，但我无法理解如何使用显示和隐藏，我尝试的是，当选择名称时仅显示该面板，而保留其他面板隐藏，当您关闭面板时，隐藏的其他面板将再次显示，并且当您选择除第一个隐藏面板之外的另一个面板时，其他面板仅显示打开的面板

这里是代码:

<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();
  });
});