ラジオボタンで起動されたブートストラップデータトグルドロップダウン

Question

ラジオボタンをクリックしてブートストラップのドロップダウンを開こうとしていますが、音がするほどシンプルです。

ブートストラップによれば、ハイパーリンクまたはボタンdata-toggle="dropdown"を使用してドロップダウンを開くことができます。 $('.dropdown-toggle').dropdown()も使用できますが、トリガーにはまだdata-toggle="dropdown"が必要です。

問題はラジオボタンがdata-toggle="dropdown"を許可していないことと、自分のハイパーリンクタグ内にラジオオプションをラップしてトグルを追加すると、ドロップダウンが機能しますが、ラジオボタン自体ではなく、同時に。ラジオボタンはアクションを実行し、ドロップダウンを表示してセカンダリアクションを許可します。

私は単純な例を与え、私の問題を再現するためにコードを書き留めました。 CODEPENでは、ドロップダウンが機能していますが、ラジオボタンには「Hello Offender」は表示されません。 <a>...</a>を削除した場合、ラジオボタンの機能は表示されますが、ドロップダウンは表示されません。どのようにして両者を動かすことができますか？

は、ここに私のコード

 <div class="form-group widget-header-radio-group"> 
      <div class="radio-group inline-radio"> 
       <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked> 
       <label for="individualForm" class="radio-custom-label">Individual</label> 
      </div> 
      <div class="radio-group inline-radio"> 
       <input id="businessForm" class="radio-custom" name="radio-group" type="radio"> 
       <label for="businessForm" class="radio-custom-label">Business</label> 
      </div> 
      <div class="radio-group inline-radio"> 
       <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> 
        <input id="offenderForm" class="radio-custom" name="radio-group" type="radio"> 
        <label for="offenderForm" class="radio-custom-label">Offender</label> 
        <ul class="dropdown-menu" id="dropdownMenu"> 
         <li id="stateOff"><a href="#">State</a></li> 
         <li id="federalOff"><a href="#">Federal</a></li> 
         <li id="countyOff"><a href="#">County</a></li> 
        </ul> 
       </a> 
      </div> 
     </div> 

     <div id="indDemo" class=""> Hello Individual</div> 
     <div id="busDemo" class=""> Hello Business</div>  
     <div id="offDemo" class=""> Hello Offender</div>  

$(document).ready(function() { 

    $('#busDemo').hide(); 
    $('#offDemo').hide(); 

    $('#individualForm').change(function() { 
     if (this.checked) { 
      $('#indDemo').show(); 
      $('#busDemo').hide(); 
      $('#offDemo').hide(); 
     } 
    }); 

    $('#businessForm').change(function() { 
     if (this.checked) { 
      $('#busDemo').show(); 
      $('#indDemo').hide(); 
      $('#offDemo').hide(); 
     } 
    }); 


    $('#offenderForm').change(function() { 
     if (this.checked) { 
      $('#offDemo').show(); 
      $('#indDemo').hide(); 
      $('#busDemo').hide(); 
     } 
    }); 


}); 

あるCODEPEN here

感謝を参照してください！

Answer 1

アンカーがラジオボタンを覆っているため、ラジオボタンの変更イベントが発生していないため、アンカーの内側からラジオボタンを取り出します。このようなラジオボタンの変更ハンドラを変更します。

$('#offenderForm').change(function() { 
     if (this.checked) { 
      $('#offDemo').show(); 
      $('#indDemo').hide(); 
      $('#busDemo').hide(); 
      $(this).siblings('a.dropdown-toggle').click(); 
     } 
    }); 

http://codepen.io/anon/pen/dXAQXX

EDIT：あなたが上で、アンカー上のクリックイベントをクリックし

$('a.dropdown-toggle').click(function(){ 
     $(this).siblings('input').click(); 
    }); 

その方法：あなたのjavascriptのコードにこれを追加ラジオボタンがトリガーされます。あなたがラジオボタンをクリックすると同様に、アンカー上のクリックイベントが

Answer 2

は、入力フィールドがアンカー入力フィールド内にある場合は、この1

function hideAllbut(id) { 
 
    $('#indDemo').hide(); 
 
    $('#busDemo').hide(); 
 
    $('#offDemo').hide(); 
 
    $('.dropdown-menu').hide() 
 
    if (id) $('#' + id).show(); 
 
} 
 
$('#individualForm').change(function() { 
 
    hideAllbut('indDemo'); 
 
}); 
 

 
$('#businessForm').change(function() { 
 
    hideAllbut('busDemo'); 
 
}); 
 

 
$('#offenderForm').click(function() { 
 
    hideAllbut('offDemo'); 
 
    $('.dropdown-menu').dropdown().show(); 
 
}); 
 
$('.dropdown-menu a').click(function() { 
 
    $('#offDemoSub').html(this.innerHTML); 
 
    $('.dropdown-menu').dropdown().hide(); 
 
}); 
 
hideAllbut('indDemo');

.dropdown-menu { 
 
    left: 150px !important; 
 
    top: 60px !important; 
 
} 
 
#offDemoSub { padding-left: 20px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <div class="form-group widget-header-radio-group"> 
 
       <div class="radio-group inline-radio"> 
 
        <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked> 
 
        <label for="individualForm" class="radio-custom-label">Individual</label> 
 
       </div> 
 
       <div class="radio-group inline-radio"> 
 
        <input id="businessForm" class="radio-custom" name="radio-group" type="radio"> 
 
        <label for="businessForm" class="radio-custom-label">Business</label> 
 
       </div> 
 
       <div class="radio-group inline-radio"> 
 

 
        <input id="offenderForm" class="radio-custom" name="radio-group" type="radio"> 
 
        <label for="offenderForm" class="radio-custom-label">Offender</label> 
 
        <ul class="dropdown-menu" id="dropdownMenu"> 
 
         <li id="stateOff"><a href="#">State</a></li> 
 
         <li id="federalOff"><a href="#">Federal</a></li> 
 
         <li id="countyOff"><a href="#">County</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div calss="row"> 
 
     <div class="col-xs-12"> 
 
      <div id="indDemo" class=""> Hello Individual</div> 
 
      <div id="busDemo" class=""> Hello Business</div> 
 
      <div id="offDemo" class=""> Hello Offender 
 
       <div id="offDemoSub" class=""></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

を試しトリガされます変更イベントを受け取ることはありません。それは解決策が変更を追加したり、クリックすることかもしれません

$(document).ready(function() { 
 
    $('#busDemo').hide(); 
 
    $('#offDemo').hide(); 
 

 
    $('#individualForm').change(function() { 
 
    if (this.checked) { 
 
     $('#indDemo').show(); 
 
     $('#busDemo').hide(); 
 
     $('#offDemo').hide(); 
 
    } 
 
    }); 
 

 
    $('#businessForm').change(function() { 
 
    if (this.checked) { 
 
     $('#busDemo').show(); 
 
     $('#indDemo').hide(); 
 
     $('#offDemo').hide(); 
 
    } 
 
    }); 
 

 

 
    
 
    // delegate the event differently 
 
    $('div.radio-group.inline-radio').on('click', 'a', function (e) { 
 
    var offenderForm = document.getElementById('offenderForm'); 
 
    if (this.contains(offenderForm)) { 
 
     offenderForm.checked = !offenderForm.checked; 
 
     if (offenderForm.checked) { 
 
     $('#offDemo').show(); 
 
     $('#indDemo').hide(); 
 
     $('#busDemo').hide(); 
 
     } 
 
    } 
 
    }); 
 
});

.dropdown-menu{ 
 
    left: 200px; 
 
    top: 60px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<!-- unchanged HTML --> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <div class="form-group widget-header-radio-group"> 
 
       <div class="radio-group inline-radio"> 
 
        <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked> 
 
        <label for="individualForm" class="radio-custom-label">Individual</label> 
 
       </div> 
 
       <div class="radio-group inline-radio"> 
 
        <input id="businessForm" class="radio-custom" name="radio-group" type="radio"> 
 
        <label for="businessForm" class="radio-custom-label">Business</label> 
 
       </div> 
 
       <div class="radio-group inline-radio"> 
 
        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> 
 
         <input id="offenderForm" class="radio-custom" name="radio-group" type="radio"> 
 
         <label for="offenderForm" class="radio-custom-label">Offender</label> 
 
         <ul class="dropdown-menu" id="dropdownMenu"> 
 
          <li id="stateOff"><a href="#">State</a></li> 
 
          <li id="federalOff"><a href="#">Federal</a></li> 
 
          <li id="countyOff"><a href="#">County</a></li> 
 
         </ul> 
 
        </a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div calss="row"> 
 
     <div class="col-xs-12"> 
 
      <div id="indDemo" class=""> Hello Individual</div> 
 
      <div id="busDemo" class=""> Hello Business</div> 
 
      <div id="offDemo" class=""> Hello Offender</div> 
 
     </div> 
 
    </div> 
 
</div>