1

我已经尝试了很多事情来尝试让它发挥作用。我想做的就是“在检查单选按钮时，手风琴内容将相应地关闭和打开，并且按钮将'检查'”。我有这个工作，但按钮不会出现检查 - 请参阅更详细的示例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>
4

3 回答 3

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)
});

提琴手。

更新

如果您有其他类似<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);

提琴手

于 2013-05-21T09:29:05.357 回答
1

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

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

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

我用有效的 html 创建了一个更新的 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>
于 2017-09-27T17:34:04.820 回答
0

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

/* 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/

于 2013-05-21T09:28:00.007 回答