CSSでnavbarから特定のドロップダウンリストを非表示にするには

Question

誰にでも表示されるべき要素と、ユーザーにとっては表示されるべき要素と、管理者には表示される要素があるNavbarがあります。私はそれらに適切なクラスを割り当て、ドロップダウン内のアイテムはそれに応じて隠すことができますが、ドロップダウン自体は隠すことはできません。

すなわち：

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

IはIにログインしていないです場合、そのドロップダウン要素の上映のいかなる部分を望んでいません。ユーザーには、 "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>

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>