首页 文章

使用嵌套的手风琴和非手风琴项展开/折叠全部：BOOTSTRAP

提问于
浏览 次
1

我大约2个月的编程和Twitter Bootstrap，所以请善待！

我做了很多挖掘和搜索，但我不确定我是否正在使用正确的术语，所以我想我会直接问 .

我正在尝试创建一个展开/折叠全部按钮，该按钮将展开或折叠 Headers Headers 下的所有项目 . Headers Headers 下的项目包括文本片段和图像 . 我希望能够通过单击 Headers Headers 来展开/折叠文本片段 . 我希望能够通过单击按钮展开/折叠文本和图像 .

问题是：我想按钮扩展/折叠所有内容，无论文本块是展开还是折叠 .

这是jsfiddle：http://jsfiddle.net/mcfly303/XXXYn/1/

如您所见，该按钮将切换与当前状态相反的打开或关闭项目 . 无论嵌套项目是展开还是折叠，都有办法进行“通用”展开/折叠吗？

基本上我想要“切换全部”按钮只能产生a） Headers 或b） Headers 和图像 .

在此先感谢您的帮助!!!!

我的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/我将按钮拆分为两个单独的按钮，以清楚地标记我想要实现的每个功能 . 但是，仍然存在扭结 . 即在加载时，首先单击 Headers 视图按钮将切换文本打开并关闭图片 . 而且在加载时，首先单击 Headers 和图像按钮将切换文本打开并保持图像打开 .

第一次点击后，一切正常，澄清（并编辑我上面的错误陈述）是：点击TITLE VIEW - 折叠除 Headers 以外的所有内容 . 单击 Headers 将展开/折叠文本片段单击 Headers 和图像视图 - 展开到 Headers 和图像 . 单击 Headers 将展开/折叠文本片段

如果有人能够帮助解决“第一次点击问题”的最后一个问题，我真的很感激！

谢谢 .

javascript twitter-bootstrap expand collapse

1 回答

  • 1

    更新了JS：

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

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

  isCollapsed = !isCollapsed;
});

    我还将 in 类添加到 #collapseOne ，以便最初正确显示页面 .

    编辑：

    基于您的编辑的新代码：

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

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

    除非我遗漏了什么，否则这似乎解决了这个问题 . jsFiddle

    回复于

相关问题