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

Question

I need to make a dropdown toggle with some options, and when the user selects one of those options from dropdown, it either triggers another dropdown toggle to appear right underneath OR Call a Div and display some content.

I have looked at the BS documentation and they don't really go into the triggers or what's needed to call another div or dropdown to display.

Here's a link to jsfiddle on what I have.

I want the second dropdown to only appear when user selects "Option 1" from previous dropdown toggle.

<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>

Would really appreciate any help I can get.

Answer 1

You have multiple options to do it.

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

OR

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

OR

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

Answer 2

First off, you'll need to detect a click event on the dropdown box in question, on an <li> if you want that to be the trigger. So:

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

});

Now, whenever an <li> is clicked inside the dropdown-menu, that callback function will be called. Here, if you need another dropdown or a div to appear, use the appendChild() method to add those items where needed. Hope this helps!