bootstrap嵌套面板折叠切换没有ID

时间:2018-02-06 21:31:05

标签: javascript jquery twitter-bootstrap panels bootstrap-accordion

我不确定我尝试做的事情是否可行,但现在确实如此。

我正在使用bootstrap 3.3.7 我也在TFS工作 通过单击“添加用户”或“阻止用户”或“临时用户”等项目生成代码块

根据每个人的用户帐户以及他们在那里拥有的内容,可以添加这些内容。 所以就那个说明。我不能拥有ID =“unique_name”,因为自动生成的代码不知道如何处理它。

这些是我一直在玩的例子。

没有IDS但没有工作 http://jsfiddle.net/misschohoh/10wk860x/2/

$('.panel-collapse').collapse({toggle: false});
$('body').on('click', '[data-toggle=collapse-next]', function (e) {
e.preventDefault();

// Try to close all of the collapse areas first
var parent_id = $(this).data('parent');
$(parent_id+' .panel-collapse').collapse('hide');

// ...then open just the one we want
var $target = $(this).parents('.panel').find('.panel-collapse');
$target.collapse('toggle');
});

与IDS和工作 http://jsfiddle.net/misschohoh/56gwtpdm/

 <!-- Here we insert another nested accordion -->

      <div class="panel-group" id="accordion2">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne"> Collapsible Inner Group Item #1 </a></h4>
          </div>
          <div id="collapseInnerOne" class="panel-collapse collapse in">
            <div class="panel-body"> Anim pariatur cliche... </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo"> Collapsible Inner Group Item #2 </a></h4>
          </div>
          <div id="collapseInnerTwo" class="panel-collapse collapse">
            <div class="panel-body"> Anim pariatur cliche... </div>
          </div>
        </div>
      </div>

      <!-- Inner accordion ends here --> 

这就是我要做的事

但如果没有为每个面板折叠定义ID

,我无法弄清楚如何做到这一点

使用IDS,使用嵌套面板正常工作和功能 https://www.bootply.com/vlLkd53dZb

有没有人知道这是否可行,并且有人可以指出我的方向让这个工作起来。

谢谢!

1 个答案:

答案 0 :(得分:0)

我必须取消绑定然后绑定面板,并停止传播。

 $('#chevronVisitors').unbind('click').on("click", function (e) {
    e.stopImmediatePropagation();