2

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

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

这是我所拥有的 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>

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

4

2 回答 2

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();
        });
于 2013-09-08T03:37:26.077 回答
0

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

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

});

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

于 2013-09-08T03:40:15.730 回答