Question

我已经尝试了很多东西来尝试让它发挥作用。我想做的就是“当检查一个单选按钮时，手风琴内容将关闭并相应打开，按钮将'检查'”。我有这个工作，但按钮不会出现检查 - 请参阅更详细的示例http://jsfiddle.net/cmE5L

            <label class="radio inline">
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Credit / debit card</label>

            <label class="radio inline">
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" data-toggle="collapse" href="#card">PayPal / Maestro</label>

            <div class="accordion">
                <div id="card" class="accordion-body collapse in">
                    <p>CONTENT</p>  
                </div>
            </div>

Answer 1

只需将.on('click'...)更改为.on('change'...)（第217行）：

$(document).on('change.collapse.data-api', '[data-toggle=collapse]',
    function (e) {
        var $this = $(this), href
          , target = $this.attr('data-target')
            || e.preventDefault()
            || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')
            //strip for ie7
          , option = $(target).data('collapse') ? 'toggle' : $this.data()
        $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
        $(target).collapse(option)
});

<强> JsFiddle

<强>更新

如果您有其他元素，例如<a...>与单选按钮共享此功能，在这种情况下，您需要做的是检查是否要将它用于链接，单选按钮或任何元素他们正在使用它。

更新2

我建议使用不同元素的相同功能：

function expand(e) {
    var $this = $(this), href, target = $this.attr('data-target')
        || e.preventDefault()
        || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')
    //strip for ie7
      , option = $(target).data('collapse') ? 'toggle' : $this.data()
    $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
    $(target).collapse(option)
}

$(document).on('click.collapse.data-api', 'a[data-toggle=collapse]', expand);

$(document).on('change.collapse.data-api',
    'input[type="radio"][data-toggle=collapse]', expand);

<强> JsFiddle

Answer 2

我知道这是旧的，但接受的答案是错的。虽然它有效，但建议的解决方案是更改Bootstrap中的核心代码，如果可以避免它，那么您不想这样做。

实际问题是原始海报中示例中的无效代码。它在无线电输入上使用href="#card"。这不是有效的HTML。 Bootstrap假设当它看到带有href的data-toggle属性时，您将在链接上使用它并且您不希望浏览器的默认操作导航到href所以它阻止了这个。

当您在无线电输入上放置href时，Bootstrap会阻止选择无线电的默认操作。使用Bootstrap的替代方法将data-target="#card"添加到无线电输入，您将无法获得preventDefault，并且一切都将正常工作。

我已经使用有效的html创建了updated JSFiddle来修复问题，但解决问题的相关代码位于

下面

<label class="radio inline">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked data-toggle="collapse" data-target="#card"> Credit / debit card
</label>

<label class="radio inline">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" data-toggle="collapse" data-target="#card"> PayPal / Maestro
</label>

<div class="accordion">
   <div id="card" class="accordion-body collapse in">
     <p>CONTENT</p>  
   </div>
</div>

Answer 3

单击时，代码阻止了单选按钮的默认操作。我从代码的这一段中删除了它，它现在可以工作了。

/* COLLAPSE DATA-API
 * ================= */
  $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
    var $this = $(this), href
      , target = $this.attr('data-target')
        //removed || e.preventDefault()
        || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
      , option = $(target).data('collapse') ? 'toggle' : $this.data()
    $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
    $(target).collapse(option)
  })

工作示例 http://jsfiddle.net/cmE5L/1/

折叠手风琴时，无法检查Bootstrap单选按钮

3 个答案: