如何在默認情況下關閉手風琴

Question

我正在面對手風琴的問題。我正在使用Bootstrap Accordion。我希望默認關閉所有面板，但我的面板已開始展開。

我的代碼有什麼問題？

<div class="panel-group" id="accordion"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h4 class="panel-title"> 
           <a data-toggle="collapse" data-parent="#accordion" href="#collapse_ONE" aria-expanded="false"> 
            Example 
           </a> 
          </h4> 
         </div> 
         <div id="collapse_ONE" class="panel-collapse collapse in"> 
          <div class="panel-body"> 
           <!-- nested --> 
           <div class="panel-group" id="nested" style="margin-bottom:0px;"> 
<div class="panel panel-default"> 
             <div class="panel-heading"> 
              <h4 class="panel-title"> 
               <a id="e1R" class="collapsed" data-toggle="collapse" data-parent="#nested" href="#collapseOne"> 
                ................. 
               </a> 
              </h4> 
             </div> 

你好

        <div class="panel panel-default"> 
             <div class="panel-heading"> 
              <h4 class="panel-title"> 
               <a id="e2R" class="collapsed" data-toggle="collapse" data-parent="#nested" href="#collapseTwo"> 
                -------------- 
               </a> 
              </h4> 
             </div> 
             <div id="collapseTwo" class="panel-collapse collapse"> 
              <div class="panel-body"> 
                  Hello 
           </div> 
             </div> 
            </div> 

      </div> 
         </div> 
        </div> 

Answer 1

就像說，名稱應該是變化的，在這裏工作的例子。試試這個：

<div> 
    <label> 
    <input type="radio" id="q128" name="quality[21]" value="1" />1</label> 
    <label> 
    <input type="radio" id="q129" name="quality[21]" value="2" />2</label> 
</div> 
<div> 
    <label> 
    <input type="radio" id="q128" name="quality[22]" value="1" />1</label> 
    <label> 
    <input type="radio" id="q129" name="quality[22]" value="2" />2</label> 
</div> 

JS

申請了第一個DIV

$('div').first().on('click', '[type="radio"]', function() { 
// put this `[type="radio"]:first here^for first radio only 
    var radioValue = $(this).val(); 
    $(this) 
    .closest('div') 
    .next() 
    .find('[type="radio"]') 
    .not('[value="' + radioValue + '"]') 
    .prop('checked', true); 
}); 

適用於所有的div（更新）

$('div').on('click', '[type="radio"]:first', function() { 
    var radioValue = $(this).val(); 
    $(this).closest('div').siblings().find('[type="radio"]').not('[value="' + radioValue + '"]').prop('checked', true); 
}); 

DEMO

Answer 2

首先使所有名稱d ifferent，Demo Fiddle

<div> 
    <label> 
    <input type="radio" id="q128" name="quality[21]" value="1" /> 1 
    </label> 
    <label> 
    <input type="radio" id="q129" name="quality[22]" value="2" /> 2 
    </label> 
    </div> 
    <div> 
    <label> 
    <input type="radio" id="q128" name="quality[23]" value="1" /> 1 
    </label> 
    <label> 
    <input type="radio" id="q129" name="quality[24]" value="2" /> 2 
    </label> 
    </div> 

並添加此jQuery的

$("input:radio").first().click(function() { 
    if ($("input:radio").first().is(':checked')) { 
      $("input:radio").attr('checked', 'checked'); 
    } 
}); 

Answer 3

剛剛嘗試這一點，

$('input[type="radio"]').change(function(){ 
 
var val = $(this).val(); 
 
$(this).closest('div').siblings().find('[type="radio"]').not('[value="' + val + '"]').prop('checked', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
<label> 
 
<input type="radio" data-id="q128" name="quality[21]" value="1" /> 1 
 
</label> 
 
<label> 
 
<input type="radio" data-id="q129" name="quality[21]" value="2" /> 2 
 
</label> 
 
</div> 
 
<div> 
 
<label> 
 
<input type="radio" data-id="q128" name="quality[22]" value="1" /> 1 
 
</label> 
 
<label> 
 
<input type="radio" data-id="q129" name="quality[22]" value="2" /> 2 
 
</label> 
 
</div>

---

其作品與你的HTML結構

$('input[type="radio"]').change(function(){ 
 
$('input[type="radio"]').prop('checked', false); 
 
var val = $(this).prop('checked', true).val(); 
 
$(this).closest('div').siblings().find('[type="radio"]').not('[value="' + val + '"]').prop('checked', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
<label> 
 
<input type="radio" id="LHS_1" value="1" /> 1 
 
</label> 
 
<label> 
 
<input type="radio" id="LHS_2" value="2" /> 2 
 
</label> 
 
</div> 
 
<div> 
 
<label> 
 
<input type="radio" id="RHS_1" value="1" /> 1 
 
</label> 
 
<label> 
 
<input type="radio" id="RHS_2" value="2" /> 2 
 
</label> 
 
</div>

我希望這會幫助你:)

Answer 4

我正在面對手風琴的問題。我正在使用Bootstrap手風琴。我希望默認關閉所有面板，但我的面板已開始展開。

<div class="panel-group" id="accordion"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h4 class="panel-title"> 
           <a data-toggle="collapse" data-parent="#accordion" href="#collapse_ONE" aria-expanded="false"> 
            Example 
           </a> 
          </h4> 
         </div> 
         <div id="collapse_ONE" class="panel-collapse collapse in"> 
          <div class="panel-body"> 
           <!-- nested --> 
           <div class="panel-group" id="nested" style="margin-bottom:0px;"> 

            <div class="panel panel-default"> 
             <div class="panel-heading"> 
              <h4 class="panel-title"> 
               <a id="e1R" class="collapsed" data-toggle="collapse" data-parent="#nested" href="#collapseOne"> 
                ................. 
               </a> 
              </h4> 
             </div> 

             <div id="collapseOne" class="panel-collapse collapse"> 
              <div class="panel-body"> 

               Hello 


              </div> 
             </div> 
            </div> 

            <div class="panel panel-default"> 
             <div class="panel-heading"> 
              <h4 class="panel-title"> 
               <a id="e2R" class="collapsed" data-toggle="collapse" data-parent="#nested" href="#collapseTwo"> 
                -------------- 
               </a> 
              </h4> 
             </div> 
             <div id="collapseTwo" class="panel-collapse collapse"> 
              <div class="panel-body"> 

               Hello 


              </div> 
             </div> 
            </div> 

           </div> 

          </div> 
         </div> 
        </div> 

       </div> 

是什麼錯誤？