Question

我怀疑显示和隐藏我使用bootstrap但是我无法理解如何使用show和hide，我尝试的是当选择名称时只显示该面板而其他面板保持隐藏，当您关闭面板时，隐藏的其他面板将再次显示，当您选择另一个面板而不是第一个面板时，其他面板仅显示打开的面板

这里是代码：

<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

＆＃13;

library(psych)

y <- cbind(health_demo.z$years.of.life.lost.to.communicable.diseases......2002, health_demo.z$years.of.life.lost.to.non.communicable.diseases......2002)
x <- as.matrix(health_demo.z$population.in.urban.areas....)
Kullback(y, x) 

head(x)
           [,1]
[1,] -0.6723010
[2,]  1.4475329
[3,]  1.3543534
[4,]  0.3526736
[5,] -1.6040962
[6,]  0.6089173

head(y)
       [,1]       [,2]
[1,] -0.5076484  0.3191182
[2,] -0.4722119  0.4345915
[3,] -0.9328864  0.8579938
[4,] -1.0037594  1.0889405
[5,]  1.0161210 -1.0280708
[6,] -0.8620134  0.5115738

＆＃13;

如何实现Show Hide JavaScript without buttons

2 个答案: