如何在css的导航栏中隐藏特定的下拉列表li

Question

我有一个导航栏，每个人都应该看到的一些元素，一些应该是用户可见的，一些应该是管理员可见的。我已经为他们分配了适当的类，dropdowns中的项目可以相应地隐藏，但不能隐藏dropdowns本身。

即：

<li class="dropdown user">
 <a class="dropdown-toggle" data-toggle="dropdown" href="#">This <span class="caret"></a>
  <ul class="dropdown-menu">
   <li class="admin"><a href="#">That</a></li>
   <li class="user"><a href="#">Something else</a></li>
  </ul>
</li>

如果我没有登录，我不想显示dropdown元素的任何部分。用户将看到"This“下拉列表和"Something choice”菜单选项，但不会看到"That“。然而，管理员将看到所有内容。

但是，即使菜单被隐藏，下拉菜单也不会隐藏。

.user{ display:none;}

例如，无论admin是否可见，都会隐藏“其他内容”而不是“此内容”。可见性:隐藏；有点工作，但仍然有一个链接的占位符，当然看起来很奇怪。

Answer 1

您应该使用像li li.admin或li li.user这样的选择器。单击View Admin Menu查看下面的示例

​

$(function() {
  $('#admin').click(function() {
    if ($(this).text() == 'View Admin Menu')
      $(this).text('View User Menu');
    else
      $(this).text('View Admin Menu');

    $('li li.admin').toggle();
  });
})

li li.admin {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="admin" href="#">View Admin Menu</a>
<br>
<br>
<li class="dropdown user">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">This <span class="caret"></a>
  <ul class="dropdown-menu">
    <li class="admin"><a href="#">That</a>
    </li>
    <li class="user"><a href="#">Something else</a>
    </li>
  </ul>
</li>

​

Answer 2

我将添加一个更完整的导航栏视图，这样您可能会更好地了解我正在尝试做什么。

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                </button>
                <div class="brand-logos">
                    <a id="something" class="brand" href="#"><img src="some image" id="something" alt="Some text"></a><br />
                    <a id="something" class="brand nohoverlink" href="index.html">Some text</a>
                </div>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <div class="navbar-right">
                    <a href="en/index.html"><img border=0 src="flag picture" id="flag"/>&nbsp;In English</a><BR>
                    <a href="#">A link</a><BR>
                    <img src="a picture" />
                </div>
                <ul class="nav navbar-nav">
                    <li class="dropdown user">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">User and admin can see <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li class="user"><a href="#" Title="Something">User and admin can see</a></li>
                            <li class="user"><a href="#" TITLE="Something">User and admin can see</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#" title="">Everybody can see <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li class="user"><a href="#">User and admin can see</a></li>
                        <li><a href="#">Every body can see</a></li>
                        <li class="admin"><a href="#" TITLE="">Only admin can see</a></li>
                        <li class="admin"><a href="#" TITLE="">Only admin can see</a></li>
                        <li class="admin"><a href="#" TITLE="">Only admin can see</a></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Everybody can see <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" title="">Every body can see</a></li>
                            <li class="user"><a href="#" title="">User and admin can see</a></li>
                        </ul>
                    </li>
                    <li class="user"><a href="#">User and admin can see</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Every body can see <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#" title="">Every body can see</a></li>
                                <li><a href="#">Every body can see</a></li>
                                <li><a href="#">Every body can see</a></li>
                                <li class="admin"><a href="#" TITLE="">Only admin can see</a></li>
                                <li class="user"><a href="#" TITLE="">User and admin can see</a></li>
                                <li class="admin"><a href="#" TITLE="">Only admin can see</a></li>
                                <li class="admin"><a href="#" TITLE="">Only admin can see</a></li>
                                <li class="admin"><a href="#" TITLE="">Only admin can see</a></li>
                                <li class="admin"><a href="#" TITLE="">Only admin can see</a></li>
                                <li class="admin"><a href="#" TITLE="">Only admin can see</a></li>
                                <li class="admin"><a href="#" TITLE="">Only admin can see</a></li>
                                <li><a href="#" TITLE="">Every body can see</a></li>
                            </ul>
                    </li>
                    <li class="dropdown user">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">User and admin can see <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li class="admin"><a href="#" TITLE="">Only admin can see</a></li>
                                <li class="user"><a href="#" TITLE="">User and admin can see</a></li>
                                <li class="admin"><a href="#" Title="">Only admin can see</a></li>
                            </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Every body can see <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" title="">Every body can see</a></li>
                            <li><a href="#" title="">Every body can see</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>