JQuery切换点击效果（demo：bootstrap折叠模块切换至可同时展开）

2024-01-27 18:44:34

前几天在用BootStrap的时候用到了其中的一个“折叠”模块，就是这个

快写（抄）完的时候突然发现一个问题，如果阅读者希望能够同时展开所有折叠框？如果一会又想切回来每次只一个？

先来看一下用比较呆的方法做的（jQuery）

<div>
        <h3>标题一</h3>
        <p>展示文本一</p>
    </div>
    <div>
        <h3>标题二</h3>
        <p>展示文本二</p>
    </div>
    <div>
        <h3>标题三</h3>
        <p>展示文本三</p>
    </div>
    <button id="toggleShowing" data-show="all">同时展示多个框体</button>

<script>
    $(function(){
        //siblings()不能跨div了？
        function showOne() {
           $(this).next("p").slideToggle("fast").parent().siblings().find("p").slideUp("fast");  
        };
        function showAll() {
            $(this).next("p").slideToggle("fast");
        };

        $("h3").bind("click",showOne);
        $("#toggleShowing").click(function () { 
            if($(this).data("show") == "all"){
                $("h3").unbind("click",showOne);
                $("h3").bind("click",showAll);
                $(this).data("show","one");    
                console.log($(this).data("show"));           
            }else{
                $("h3").unbind("click",showAll);
                $("h3").bind("click",showOne);
                $(this).data("show","all");    
            }
        })

    })
</script>

(ps:使用sibling()方法的时候很诡异的发现不能跨div了？也就是说只能兄弟不能堂哥堂弟了？明天再专门研究一哈)

这个方法有些呆，但是能正确的实现效果

试一下用BS本身自带的钩子能不能（直接在菜鸟教程上修改）：

网址：https://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html

注意：在在线编辑器中把下图中的in去掉，这个会使得该折叠默认开启，影响后续判断