Bootstrap 使用嵌套的可折叠面板和非可折叠面板项目展开/折叠全部:引导程序

qqrboqgw  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(254)

我大约2个月新的编程和Twitter的引导程序,所以请善良!
我已经做了大量的挖掘和搜索,但不确定我使用的是正确的术语,所以我想我会直接问。
我正在尝试创建“全部展开/折叠”按钮,该按钮将展开或折叠标题页眉下的所有项目。标题页眉下的项目包括文本片段和图像。我希望能够通过单击标题页眉展开/折叠文本片段。我希望能够通过单击按钮展开/折叠文本和图像。
问题是:我想按钮来展开/折叠所有内容,无论文本片段是展开还是折叠。
这是jsfiddle:http://jsfiddle.net/mcfly303/XXXYn/1/
正如您所看到的,该按钮将切换项目的打开或关闭状态,与它们的当前状态相反。是否有一种方法可以执行“通用”展开/折叠,而不管嵌套项目是展开还是折叠?
基本上,我想“切换所有”按钮,结果只在a)标题或b)标题和图像。
提前感谢您的帮助!
我的html:

<div class="well sidebar-nav" id="sidebar">
    <ul class="nav nav-list">
        <li><a href="#" class="expandcollapse">Toggle All</a>

        </li>
    </ul>
</div>
<div class="accordion" id="accordion1">
    <div class="accordion-group">
        <div class="row-fluid">
           <div class="span9">
                <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
                                    <h2>COOL HAND LUKE</h2>
                    </a>

                </div>
            </div>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
               <div class="mainList"> <a href="#">Paul Newman Movies</a>  <a href="#"> <i class="icon-white icon-th-list"></i></a>

                </div>
            </div>
        </div>
    </div>
</div>

<div id="collapseMain" class="accordion-body collapse in">
    <div class="accordion-inner">
        <div class="row-fluid">
            <div class="span12">
                <img src="http://www.samefacts.com/wp-content/uploads/2012/12/CoolHandLuke_135Pyxurz.jpg" alt="">

            </div>
        </div>
    </div>
</div>

我的javascript:

$('.expandcollapse').click(function () {

    $('.collapse').each(function (index) {
        $(this).collapse("toggle");
    });
});

编辑:所以我部分地弄明白了。jsfiddle:http://jsfiddle.net/mcfly303/XXXYn/4/我把to按钮分成两个独立的按钮,以便清楚地标记我想实现的每个功能。但是,仍然有一个问题。即在加载时,第一次单击标题视图按钮将切换文本打开和图片关闭。同样在加载时,第一次单击标题和图片按钮将切换文本打开和图片保持打开。
在第一次点击之后,一切都很好,需要澄清的是(并编辑我上面的错误陈述):单击标题视图-折叠除标题外的所有内容。单击标题将展开/折叠文本部分。单击标题和图像视图-展开至标题和图像。单击标题将展开/折叠文本部分。
如果有人可以请帮助这最后一个扭结的“第一次点击问题”,我真的会很感激!

  • 谢谢-谢谢
bz4sfanl

bz4sfanl1#

更新的JS:

var isCollapsed = false;
$('.expandcollapse').click(function () {
  var collapseCommand = isCollapsed ? "show" : "hide";

  $('.collapse').each(function () {  
    $(this).collapse(collapseCommand);
  });

  isCollapsed = !isCollapsed;
});

我还向#collapseOne添加了in类,以便页面最初能够正确显示。
编辑:
基于您的编辑的新代码:

$('.titleView').click(function () {
  $('#collapseOne, #collapseMain').collapse('hide');
});

$('.fullStubView').click(function () {
  $('#collapseOne, #collapseMain').collapse('show');
});

除非我遗漏了什么,否则看起来这解决了问题。jsFiddle

相关问题