Question

我在我的应用程序中使用bootstrap v3.3.5并希望包含折叠功能，以便当用户点击链接时，在它下面的div切换。参考这个Can you specify a "data-target" for Bootstrap which refers to a sibling DOM element without using an ID?中的答案，我能够达到与我的要求相似的结果，在下面的小提琴链接中 https://jsfiddle.net/szp1cg0k/，正在使用bootstrap v2.1.1.min.js和v2.1.1.min.css

但是当我包含bootstrap v3.3.5.min.js和v3.3.5.min.css引用的同一个小提琴时，切换/折叠功能在这里不起作用，也不会抛出任何错误

更新了JS https://jsfiddle.net/ohoLxap6/2/

html代码：

<fieldset class="fsStyle">      
                <legend class="legendStyle">
                  <a data-toggle="collapse-next" data-target=".demo" href="#">Activity Log Filter Criteria4</a>
                </legend>
                <div class="demo" >
                        <div class="col-md-2">
                            <label for="activity_from_date" class="labelStyle">Activity From Date:</label>
                        </div>
                        <div class="col-md-4">
                            <input name="fromDate" maxlength="10" size="11" tabindex="59" value="" onblur="javascript:DateFormat(this,event,true);" class="textInput" id="activity_from_date" type="text">
                        </div>
      </div>
</fieldset>

脚本：

$('body').on('click.collapse-next.data-api', '[data-toggle=collapse-next]', function() {
console.log($(this).parent());
var $target = $(this).parent().next()
console.log($target);
$target.data('collapse') ? $target.collapse('toggle') : $target.collapse()    
});

任何人都可以给我一些暗示我出错的地方吗？

更新：

我知道bootstrap的崩溃功能，我的表单中有多个div，我想在大多数div上包含collapse函数。实现这一目标的一种方法是

<div data-toggle="collapse" data-target="#demo1">
  <div id="demo1">
    <p>demo 1 ......</p>
  </div>
<div data-toggle="collapse" data-target="#demo2">
  <div id="demo2">
    <p>demo 2 ......</p>
  </div>

但我不想使用id，而是想指定类。原因是，我在后端有jqtree，我也必须包含克隆功能，所以使用id意味着克隆后我需要处理克隆子节点div的id。因此，想要使用类，如下所示

<div data-toggle="collapse" data-target=".demo">
  <div class="demo">
    <p>demo 1 ......</p>
  </div>
<div data-toggle="collapse" data-target=".demo">
  <div class="demo">
    <p>demo 2 ......</p>
  </div>

Answer 1

有这个工作。我已相应地更新了小提琴。 https://jsfiddle.net/ohoLxap6/3/

$('body').on('click.collapse-next.data-api', '[data-toggle=collapse-next]',
function() {

//console.log($(this).parent());
var $target = $(this).parent().next()
console.log($target);
$target.data('bs.collapse') ? $target.collapse('toggle') : 
$target.collapse()    
});

Answer 2

为什么要为现有的Bootstrap函数编写自己的代码？以下代码是最新的Bootstrap版本折叠方法的示例：

<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
   Some text..
</div>

文档：http://getbootstrap.com/javascript/#collapse

更新：

根据你的新问题，使用类折叠，我创建了一个自定义脚本：

$('[data-toggle="collapse"]').click(function() {
   var $target = $(this).data('target');
   var $target = $($target);
   $target.data('bs.collapse') ? $target.collapse('toggle') : 
   $target.collapse()
});

现在data-target属性中的所有类都将被切换。 https://jsfiddle.net/ohoLxap6/4/

Bootstrap v3.3.5和v2.1.1之间的Bootstrap崩溃函数差异

2 个答案: