Wie verbirg ich bestimmte Dropdown-li aus Navbar in css

Question

Ich habe eine Navbar mit einigen Elementen, die für alle sichtbar sein sollte, einige, die für Benutzer sichtbar sein sollten und einige, die für Administratoren sichtbar sein sollte. Ich habe ihnen die passenden Klassen zugewiesen und die Items in den Drop-Downs können entsprechend ausgeblendet werden, aber nicht die Dropdown-Menüs selbst.

Ie:

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

Wenn ich nicht angemeldet bin in ich keinen Teil dieses Drop-down-Element zeigt möge. Ein Benutzer wird das "Dies" -Dropdown und die "Etwas anderes" -Menüauswahl sehen, aber nicht "Das". Ein Administrator wird jedoch alles sehen.

Aber selbst wenn die Menuchoices ausgeblendet werden, ist das Dropdown nicht.

zum Beispiel wird "Etwas anderes" aber nicht "Dies" ausblenden, unabhängig davon, ob Admin sichtbar ist oder nicht. Sichtbarkeit: versteckt; Art von Arbeiten, aber es gibt immer noch einen Platzhalter für den Link, der natürlich seltsam aussieht.

Answer 1

Sie sollten den Selektor wie li li.admin oder li li.user verwenden. Unten finden Sie beispielsweise durch Klicken auf 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

Ich werde einen vollständigen Überblick über meine navbar hinzufügen, so könnten Sie ein besseres Verständnis von dem, was ich versuche zu tun.

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