Question

因此，我尝试使用JavaScript以编程方式调用collapse。我的表单有几个复选框，从空开始。如果＆＃34;否＆＃34;单击，然后我想折叠该部分，否则它应保持打开状态。在No和Yes之间来回切换应分别折叠并显示该部分。

尝试＃1

由于它是动态完成的，在我致电.collapse('show')或.collapse('hide')之前，我需要通过直接调用.collapse()来调用崩溃插件。

由于我此时正在调用，因此我传入了对象{toggle: false}：

在调用时切换可折叠元素（默认：true）

这应该准备好元素，然后允许隐藏和显示来做他们的事情。

但如果第一个电话是hide，它就不会工作。在第一次通过后，切换工作来回很好，但它第一次没有工作。

＆＃13;

$(".radio input:radio").change(function(){
  if ($(this).is(":checked")) {
    var selected = (this.value === "True");
    var selector = $(this).closest(".radio").data("toggle-target");
    var $section = $(selector)

    // initialize, but don't do anything yet
    if (!$section.data('bs.collapse')) {
      $section.collapse({ toggle: false });
    }
    
    // show or hide based on selection
    var collapseAction = selected ? 'show' : 'hide';
    $section.collapse(collapseAction);

  }
});

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container" >
  
  <div class="radio" data-toggle-target="#section">
    <label><input type="radio" name="radio" value="False"> <b>No</b></label><br>
    <label><input type="radio" name="radio" value="True"> <b>Yes</b></label>
  </div>
  
  <div id="section">
    <h2>Rest of the Section</h2>
  </div>
  
</div>

＆＃13;

尝试＃2

作为第二次尝试，如果我们想立即隐藏它，我们可以在第一次调用时允许toggle选项为true。否则，我们将阻止默认操作。

＆＃13;

$(".radio input:radio").change(function(){
  if ($(this).is(":checked")) {
    var selected = (this.value === "True");
    var selector = $(this).closest(".radio").data("toggle-target");
    var $section = $(selector)

    // check if initialized
    if (!$section.data('bs.collapse')) {
      // initialize and do toggle if we need to hide
      $section.collapse({ toggle: selected });
      
    } else {
      // show or hide based on selection
      var collapseAction = selected ? 'show' : 'hide';
      $section.collapse(collapseAction);
    }
  }
});

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container" >
  
  <div class="radio" data-toggle-target="#section">
    <label><input type="radio" name="radio" value="False"> <b>No</b></label><br>
    <label><input type="radio" name="radio" value="True"> <b>Yes</b></label>
  </div>
  
  <div id="section">
    <h2>Rest of the Section</h2>
  </div>
  
</div>

＆＃13;

我尝试了很多可能的调用，显示和隐藏迭代，当没有点击时，似乎没有任何东西可以立即隐藏该部分。

此外，理想情况下，如果第一次点击开启，该元素不应该有任何节目动画“是”＆＃39;因为它已经可见所以动画会让人感到困惑。

这似乎与这两个GitHub问题有关，但两者都出现在代码中，或者没有提供进一步的解决方案

Answer 1

将班级collapse in添加到<h2>

请参阅代码段：

＆＃13;

$(".radio input:radio").change(function(){
  if ($(this).is(":checked")) {
    var selected = (this.value === "True");
    var selector = $(this).closest(".radio").data("toggle-target");
    var $section = $(selector)

    // initialize, but don't do anything yet
    if ($section.data('bs.collapse')) {
      $section.collapse({ toggle: false });
    }
    
    // show or hide based on selection
    var collapseAction = selected ? 'show' : 'hide';
    $section.collapse(collapseAction);

  }
});

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container" >
  
  <div class="radio" data-toggle-target="#section">
    <label><input type="radio" name="radio" value="False"> <b>No</b></label><br>
    <label><input type="radio" name="radio" value="True"> <b>Yes</b></label>
  </div>
  
  <div id="section" class="collapse in">
    <h2>Rest of the Section</h2>
  </div>
  
</div>

＆＃13;

首先要显示崩溃（＆＃39;隐藏＆＃39;）

尝试＃1

尝试＃2

1 个答案: