Question

我有一个导航栏，其中包含一些应该对所有人都可见的元素，一些应该对用户可见，一些应该对管理员可见。我已经为它们分配了适当的类，并且可以相应地隐藏下拉列表中的项目，但不是自己的下拉列表。

即：

<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>

如果我没有登录，我不希望显示该下拉元素的任何部分。用户将看到“This”下拉菜单和“Something else”菜单选项，但不会看到“That”。但是，管理员会看到这一切。

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

.user{ display:none;}

例如，无论管理员是否可见，

都会隐藏“其他”而不是“此”。 visibility：hidden的;有点作品，但仍有一个占位符，因为链接看起来很奇怪。

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>

如何在css

2 个答案: