使用 Twitter Bootstrap 下拉切换来触发另一个下拉切换或 div

Question

我需要使用一些选项进行下拉切换，当用户从下拉列表中选择其中一个选项时，它要么触发另一个下拉切换，出现在正下方，要么调用 Div 并显示一些内容。

我查看了 BS 文档，但它们并没有真正进入触发器或调用另一个 div 或下拉菜单以显示所需的内容。

这是a link to jsfiddle 我所拥有的。

我希望第二个下拉列表仅在用户从之前的下拉切换中选择“选项 1”时出现。

<div class="question">
<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Select one                    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#" id="opt1" >Option 1</a></li>
    <li><a href="#" id="opt2">Option 2</a></li>
    <li><a href="#" id="opt3">Option 3</a></li>
    <li><a href="#" id="opt3">Option 4</a></li>
  </ul>
</div>

<div class="question">
  <div class="btn-group">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Another One                    <b class="caret"></b>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#" id="opt5" >Option 5</a></li>
        <li><a href="#" id="opt6">Option 6</a></li>
        <li><a href="#" id="opt7">Option 7</a></li>
        <li><a href="#" id="opt8">Option 8</a></li>
      </ul>
    </div>
</div>

非常感谢我能得到的任何帮助。

Answer 1

您有多种选择。

$('.question .visitor li:first-child a').click(function () { // First li of it's parent
            $('.opt1').fadeToggle();
        });

或

$('.question .visitor li:eq(0) a').click(function () { // 0 is the first of all relevant elements criteria 
            $('.opt1').fadeToggle();
        });

或

$('#opt1').click(function () { // Select by ID
            $('.opt1').fadeToggle();
        });

Answer 2

首先，如果您希望它成为触发器，您需要在<li> 上检测相关下拉框上的点击事件。所以：

$( "ul.dropdown-menu li" ).click(function() {

});

现在，只要在下拉菜单中单击<li>，就会调用该回调函数。在这里，如果您需要显示另一个下拉列表或 div，请使用 appendChild() 方法在需要的地方添加这些项目。希望这会有所帮助！