摺疊手風琴時，引導程序單選按鈕不檢查

我嘗試了很多嘗試並使其工作的東西。我想要做的就是「當檢查一個單選按鈕時，手風琴內容將相應地關閉並打開，按鈕將'檢查'」。我有這個工作，但按鈕不會出現檢查 - 請更詳細的例子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>

來源

2013-05-21 Tom Rudge

只要改變你的.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。

UPDATE

如果您有其他元素，如<a...>共享與單選按鈕這個功能，在這種情況下，你所要做的是檢查，如果你要使用它的鏈接，單選按鈕或者你使用它的任何元素。

更新2

我的建議，使用相同的功能與diferent元素：

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

來源

2013-05-21 09:29:05 DaGLiMiOuX

非常感謝相關的代碼！工作過一種享受。 –

@TomRudge歡迎您！ ^^ – DaGLiMiOuX

其實，我確實有這個問題...我確實有其他事件使用'崩潰'，不能與'on.change'工作，如

Enter address manually

–

的代碼是防止單選按鈕的默認操作被點擊時。我從代碼的這一部分中刪除它，現在它可以工作。

/* 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-21 09:28:00

我知道這是一個古老的，但接受的答案是錯誤的。雖然它起作用，但提出的解決方案是更改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>

來源

2017-09-27 17:34:04

摺疊手風琴時，引導程序單選按鈕不檢查

回答

相關問題