顯示/隱藏（通過Bootstrap的崩潰功能）divs基於單選按鈕

Question

我試圖使用Bootstrap的崩潰功能來顯示/隱藏基於哪個單選按鈕被檢查的div。但是，當我不使用Bootstrap的崩潰函數時，我能夠使事情正常工作，但爲了讓我更願意利用此功能獲得更一致的感受。

這裏是HTML的問題一個片段：

<div class="col-xs-12 form-group"> 
    <label class="radio-inline"> 
    <input type="radio" id="send-now-radio" name="when" value="send-now" checked> <strong>Send Now</strong> 
    </label> 
    <label class="radio-inline"> 
    <input type="radio" id="pickup-radio" name="when" value="pickup"> <strong>Hold for pickup</strong> 
    </label> 
    <label class="radio-inline"> 
    <input type="radio" id="fax-radio" name="when" value="fax"> <strong>Fax</strong> 
    </label> 
    <label class="radio-inline"> 
    <input type="radio" id="email-radio" name="when" value="email"> <strong>Email</strong> 
    </label> 
</div> 
<div class="col-xs-12"> 
    <div id="send">Send</div> 
    <div id="pickup">Pickup</div> 
    <div id="fax">Fax</div> 
    <div id="email">Email</div> 
</div> 

這是我的javascript代碼：

$(document).ready(function() 
{ 
    // Hide all but one method div (since all are shown in case the user has JS disabled) 
    $('#send').show(); 
    $('#pickup').hide(); 
    $('#fax').hide(); 
    $('#email').hide(); 

    // Attach to the radio buttons when they change 
    $('#send-now-radio, #pickup-radio, #fax-radio, #email-radio').on('change', function() { 
    // Make sure that this change is because a radio button has been checked 
    if (!this.checked) return 

    // Check which radio button has changed 
    if (this.id == 'send-now-radio') { 
     $('#send').collapse('show'); 
     $('#pickup').collapse('hide'); 
     $('#fax').collapse('hide'); 
     $('#email').collapse('hide'); 
    } else if (this.id == 'pickup-radio') { 
     $('#send').collapse('hide'); 
     $('#pickup').collapse('show'); 
     $('#fax').collapse('hide'); 
     $('#email').collapse('hide'); 
    } else if (this.id == 'fax-radio') { 
     $('#send').collapse('hide'); 
     $('#pickup').collapse('hide'); 
     $('#fax').collapse('show'); 
     $('#email').collapse('hide'); 
    } else // if (this.id == 'email-radio') { 
     $('#send').collapse('hide'); 
     $('#pickup').collapse('hide'); 
     $('#fax').collapse('hide'); 
     $('#email').collapse('show'); 
    } 
    }); 
}; 

這裏有一個鏈接到一個JS撥弄着這一切：http://jsfiddle.net/DTcHh/156/

不幸的是我錯過了一些東西，導致行爲很奇怪，而不是我期望的。任何幫助，高度讚賞。

Answer 1

首先，優秀的問題。您提供了代碼，明確了您嘗試的內容等。喜歡它。

我叉你的jsfiddle，以及與此想出了： http://jsfiddle.net/emptywalls/EgVF9/

這裏是JavaScript的：

$('input[type=radio]').on('change', function() { 
    if (!this.checked) return 
    $('.collapse').not($('div.' + $(this).attr('class'))).slideUp(); 
    $('.collapse.' + $(this).attr('class')).slideDown(); 
}); 

我不建議使用從引導崩潰的功能，它依賴於一個非常不同的從你需要的DOM結構。我的小提琴只用jQuery來完成你所需要的。我的做法是將單選按鈕和div與類配對，這樣可以幹你的代碼。

Answer 2

作爲@emptywalls提到，Bootstrap崩潰功能將不起作用。我試了一下，它幾乎沒有，除了它是基於點擊源元素，而不是它的狀態。單選按鈕需要注意它的狀態。

但是我想要一些東西讓我用數據標籤標記元素並讓它繼承引導程序崩潰時的功能。所以，我想出了這個：

<input data-target="#send" data-toggle="radio-collapse" id="send_now_radio" name="when" type="radio" value="send-now"> 
<div id="send" class="collapse">Send</div> 

然後在你的網站上，這包括一次，它適用於所有這樣的按鈕。

$('input[type=radio][data-toggle=radio-collapse]').each(function(index, item) { 
    var $item = $(item); 
    var $target = $($item.data('target')); 

    $('input[type=radio][name="' + item.name + '"]').on('change', function() { 
    if($item.is(':checked')) { 
     $target.collapse('show'); 
    } else { 
     $target.collapse('hide'); 
    } 
    }); 
}); 

這爲動畫使用Bootstrap的摺疊功能。您可以輕鬆使用jQuery hide()和show()。

Answer 3

除非我弄錯了，否則如果您有另一組具有不同名稱屬性的單選按鈕，@jwadsa​​ck代碼將不起作用。

這是因爲$item和$target變量是全局聲明的。 $item變量將由最後一組覆蓋，只有這個變量會隱藏/顯示collaspe。

在變量定義似乎解決問題之前添加var。

的代碼然後

$('input[type=radio][data-toggle=radio-collapse]').each(function(index, item) { 
    var $item = $(item); 
    var $target = $($item.data('target')); 

$('input[type=radio][name="' + item.name + '"]').on('change', function() { 
    if($item.is(':checked')) { 
    $target.collapse('show'); 
    } else { 
    $target.collapse('hide'); 
    } 
}); 
});