我有一个导航栏,其中有些元素应该对每个人都可见,有些应该对用户可见,有些应该对管理员可见。我已经为它们分配了适当的类,下拉菜单中的元素可以相应地隐藏,但不是下拉菜单本身。
即:
<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;}
例如,无论管理员是否可见,都会隐藏“其他”而不是“此”。可见性:隐藏;有点作品,但仍然有一个链接的占位符当然看起来很奇怪。
最佳答案
您应该使用像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>
关于html - 如何在 css 的导航栏中隐藏特定的下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37408644/