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

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

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

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>