Question

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

我查看了BS文档，他们并没有真正进入触发器或者需要调用另一个div或下拉列表来显示。

我希望第二个下拉列表仅在用户从上一个下拉切换选择“选项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();
        });

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

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

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

});

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

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

2 个答案: