javascript - 使用 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();
        });