如何在boostrap下拉列表中隐藏一项

Question

这是我的引导代码。

<label>Select Leave Type</label>
<div class="dropdown">
    <i class="dropdown-arrow dropdown-arrow-inverse"></i>
    <button class="btn btn4 btn-default dropdown-toggle" type="button" id="menu0" data-toggle="dropdown">--Select--
    <span class="caret"></span></button>
    <ul class="dropdown-menu  dropdown-inverse0" role="menu" aria-labelledby="menu0" id="drp0">
        <li role="presentation"><a data-myAttribute0="casual" class="list0" href="#" >Casual Leave</a></li>
        <li role="presentation"><a data-myAttribute0="annual" class="list0" href="#" >Annual Leave</a></li>
        <li role="presentation"><a data-myAttribute0="medical" class="list0" href="#" >Medical Leave</a></li>
    </ul>
</div>

这是我通常用来隐藏整个下拉列表的代码。

$('.btn4').css('visibility', 'hidden');

但此刻我想隐藏一件物品。无法弄明白。请帮我。谢谢。

编辑1 当我使用

       <script>
        $('document').ready(function () {
           $('#drp0 li').eq(1).css('visibility', 'hidden');

        });</script>

有时候是这样的。

你可以理解这不是我需要的。请给我更多的建议

Answer 1

要使用绝对Bootstrap解决方案，您可以将hide类添加到要隐藏的元素中。 例如：

<li role="presentation"><a data-myAttribute0="annual" class="list0 hide" href="#" >Annual Leave</a></li>

以下是BootPly上的示例：http://www.bootply.com/q7gTTiFzOT

如果您希望使用jQuery动态完成此操作，可以试试这个：

$('ul > li:eq(1)').addClass('hide');

Answer 2

选择li内的drp0元素（这是您的下拉菜单的ID），然后从返回的列表中选择要隐藏的元素（从第一项的零开始），如下所示：

// hide first item
$('#drp0 li').eq(0).css('visibility', 'hidden');

// hide second item
$('#drp0 li').eq(1).css('visibility', 'hidden');

// hide third item
$('#drp0 li').eq(2).css('visibility', 'hidden');

// etc

来自jQuery文档：

  

.eq（index）

     

描述：将匹配元素集减少到指定索引处的元素。

https://api.jquery.com/eq/

您可能希望使用display:none;折叠元素：

// hide second item
$('#drp0 li').eq(1).css('display', 'none');

Answer 3

1

 $("li:eq(1)").css('visibility', 'hidden');

2或者你可以给每个“li”一个id，然后

$("#id").css('visibility', 'hidden');

Answer 4

//隐藏第一项

$(".btn4").click(function(){
      $('.dropdown-menu li').eq(0).css('visibility', 'hidden');
});