使用引導手風琴時單選按鈕不能與數據切換一起使用

Question

我想選擇單選按鈕選項，也想使用自舉式手風琴，但是當使用數據切換時，則不會選擇單選按鈕選項。 我如何將其用於目的

 <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> <div id='accordion1' class='panel-group'> <div class='panel' style="border: none !important; -webkit-box-shadow:none !important;"> <input type='radio' id='r11' name='occupation' value='Working' required> <label data-toggle='collapse' data-parent='#accordion1' href='#collapse3' class='button1 header' for='r11' style='width: 350px;'>Working</label> <div id='collapse3' class='collapse'> <div class='panel-body'> <div class='form-group'> <label class='col-md-4 control-label' for='textinput'></label> <div class='col-md-4'> <input id='textinput' name='profession' type='text' placeholder='Profession' class='form-control input-md'> <span class='help-block'>eg Business Owner, Chef, Sales Person</span> </div> </div> </div> </div> </div> <div class='panel' style="border: none !important; -webkit-box-shadow:none !important;"> <input type='radio' id='r21' name='occupation' value='Non-Working'> <label data-toggle='collapse' data-parent='#accordion1' href='#collapse4' class='button1 header1' for='r21' style='width: 350px'>Not Working</label> <div id='collapse4' class='collapse'> <div class='panel-body'> <div class='form-group'> <label class='col-md-4 control-label' for='selectbasic'></label> <div class='col-md-4'> <select id='selectbasic' name='profession' class='form-control'> <option value='' selected='selected' disabled>Select</option> <option value='Student'>Student</option> <option value='Stay at home'>Stay at home</option> </select> </div> </div> </div> </div> </div> </div> 

Answer 1

HTML代碼段

<form class="bs-example" action="">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
            <label for='r11' style='width: 350px;'>
              <input type='radio' id='r11' name='occupation' value='Working' required /> Working
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></a>
            </label>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class=panel-title>
            <label for='r12' style='width: 350px;'>
              <input type='radio' id='r12' name='occupation' value='Not-Working' required /> Not Working
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"></a>
            </label>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
        </div>
      </div>
    </div>
  </div>
</form>

JS代碼段

$('#r11').on('click', function(){
$(this).parent().find('a').trigger('click')
})

$('#r12').on('click', function(){
  $(this).parent().find('a').trigger('click')
})

我所做的是-單擊單選按鈕時，使用了JQuery來觸發錨標記事件，因為它們兩個都有自己的默認單擊事件，因此錨不能將單選按鈕作為子代。 因此，為使事情正常進行，我將它們用作同級元素，並在按下單選按鈕時觸發了錨點的click事件

希望這就是您所期望的！ 謝謝

請檢查此Codepen代碼段 ，以獲取更多參考。