使用 Bootstrap 下拉菜单选择项目答案

【问题标题】：Selecting Item with Bootstrap Dropdown使用 Bootstrap 下拉菜单选择项目
【发布时间】：2015-02-07 19:57:37
【问题描述】：

我想为 Bootstrap 下拉框编写 javascript 代码，但我不知道如何引用下拉列表中的项目。当我编写诸如 if (item1 被选中或为真) {“某事发生”} 之类的 if 语句时，没有可以引用的 ID 或类。如何引用 item1 或 item2 或 item3？

 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li role="presentation" class="item1"><a role="menuitem" tabindex="-1" href="javascript:void(0)">item1</a></li>
    <li role="presentation" class="item2"><a role="menuitem" tabindex="-1" href="javascript:void(0)">item2</a></li>
    <li role="presentation" class="item3"><a role="menuitem" tabindex="-1" href="javascript:void(0)">item3</a></li>

  </ul>

    $('.dropdown-menu li').on('click', function(){
       if($('.dropdown-menu li.item1')){
            $('item1Box').fadeTo(200, 0);
           }
    });

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您可以根据自己的要求对其进行一些自定义。因此，例如，您可以在下拉更改事件期间在所选值上添加自定义类并将其设置为选中。

$('.dropdown-menu li').on('click', function(){
    //Remove previously selected 
    $('.dropdown-menu li').removeClass("selectedValue");
    //Add selected flag to current element
    $(this).addClass("selectedValue");
});

并且您可以在任何情况下使用 , 来检查您选择的值，

$('.dropdown-menu li.selectedValue');

或者，您还可以根据需要将自己的类和 id 添加到 Bootstrap 下拉列表中。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li role="presentation" class="first-value"><a role="menuitem" tabindex="-1" href="#">item1</a></li>
    <li role="presentation" class="second-value"><a role="menuitem" tabindex="-1" href="#">item2</a></li>
    <li role="presentation" class="third-value"><a role="menuitem" tabindex="-1" href="#">item3</a></li>
  </ul>

【讨论】：

根据你所说的我重写了。请参阅页面顶部的代码。当 item1 被选中时，我想要显示的 Dropbox，当前具有 opacity:0 应该淡入可见，但什么也没有出现。这是为什么呢？

【解决方案2】：

我认为你可以做 switch 和 case (li.value=item1) ...... 也许你应该把 value="item1" 放在 li 元素中 - 或者更确切地说摆脱那些链接并通过 Javascript /jquery 来做我有类似switch(li.value){ (item1) : $("#dropdown-menu").attr("action", page1.html); $("#dropdown-menu").submit(); break; (item2) : ..... } 的东西，我认为那些 li 被“索引”或者服务器知道 taht item1是第一个

... 和打开表单的触发器 = 下拉提交

【讨论】：

【解决方案3】：

像这样的东西？ http://jsfiddle.net/he2d1mmt/

  <div class="dropdown">
        <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown trigger
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pres" role="menu" aria-labelledby="dLabel">
          <li role="presentation" class="item1"><a role="menuitem" tabindex="-1" href="#)">item1</a></li>
          <li role="presentation" class="item2"><a role="menuitem" tabindex="-1" href="#">item2</a></li>
          <li role="presentation" class="item3"><a role="menuitem" tabindex="-1" href="#">item3</a></li>
        </ul>
      </div>
<script>
$(document).ready(function() {
  $(".pres").children().click(function(){
    $(this).fadeTo(200, 0);
  });
});
</script>

【讨论】：