Menüelemente auf dem Client anzeigen/verbergen klicken Sie hier, um zu klicken. Adminiziolite Vorlage

Question

Ich habe eine Webvorlage von Adminiziolite heruntergeladen. Ich versuche, beim Client-Klick eine Menüoption zum Ein-/Ausblenden zu erstellen. Wie kann ich das machen?

<div id="aside" class="box"> 

    <div class="padding box"> 

     <!-- Logo (Max. width = 200px) --> 
     <p id="logo"> 
      <a href="#"> 
       <img src="tmp/logo.gif" alt="Our logo" title="Visit Site" /></a> 
     </p> 
    </div> 
    <!-- /padding --> 

    <ul class="box"> 
     <li><a href="OPDRegister.aspx">New Patient Register</a></li> 
     <li><a href="OldPatientRegistration.aspx">Old Patient Register</a></li> 
     <li><a href="DetailRegistration.aspx">Detail Patient Register</a></li> 
     <li id="submenu-active"><a href="#">Report</a> 
      <!-- Active --> 
      <ul> 
       <li><a href="#">New Patient Report</a></li> 
       <li><a href="#">Old Patient Report</a></li> 
       <li><a href="#">Detail Patient Report</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

I/zeigen versuchen, blenden Sie die Menüpunkte unter dem Bericht Abschnitt. Beim Client-Klick sollten die Berichtselemente angezeigt werden. Wie kann ich dies tun?

Answer 1

Sie können Ihr Untermenü ausblenden und anzeigen, indem Sie das folgende JavaScript und Inline-CSS hinzufügen.

Wie funktioniert es:

• ausblenden Untermenüpunkt Bericht (mit Inline-CSS <ul style="display:none">).
• Fügen Sie einen Ereignis-Listener (Klick) in Ihrem Menübericht hinzu.
• Wenn Benutzer auf Menübericht klicken, überprüfen Sie die Variable isMenuReportVisible.
• Wenn das Untermenü nicht sichtbar ist, machen Sie es sichtbar, andernfalls verstecken Sie es.

var btnHide = document.getElementById('btnHide'), 
 
    btnShow = document.getElementById('btnShow'), 
 
    reportMenu = document.querySelector('#submenu-active > ul'), 
 
    menuReport = document.querySelector('#submenu-active'), 
 
    isMenuReportVisible = false; 
 
menuReport.addEventListener('click', function(even) { 
 
    if (!isMenuReportVisible) { 
 
    reportMenu.style.display = ''; 
 
    isMenuReportVisible = true; 
 
    } else { 
 
    reportMenu.style.display = 'none'; 
 
    isMenuReportVisible = false; 
 
    } 
 
});

<div id="aside" class="box"> 
 

 
    <div class="padding box"> 
 

 
    <!-- Logo (Max. width = 200px) --> 
 
    <p id="logo"> 
 
     <a href="#"> 
 
     <img src="tmp/logo.gif" alt="Our logo" title="Visit Site" /></a> 
 
    </p> 
 
    </div> 
 
    <!-- /padding --> 
 

 
    <ul class="box"> 
 
    <li><a href="OPDRegister.aspx">New Patient Register</a></li> 
 
    <li><a href="OldPatientRegistration.aspx">Old Patient Register</a></li> 
 
    <li><a href="DetailRegistration.aspx">Detail Patient Register</a></li> 
 
    <li id="submenu-active"><a href="#">Report</a> 
 
     <!-- Active --> 
 
     <ul style="display:none"> 
 
     <li><a href="#">New Patient Report</a></li> 
 
     <li><a href="#">Old Patient Report</a></li> 
 
     <li><a href="#">Detail Patient Report</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

Sie können dies versuchen.

$(document).ready(function() { 
 

 
    $('li ul').hide() 
 
    $("li").click(function() { 
 
    $(this).find('ul').toggle(); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="aside" class="box"> 
 
    <!-- /padding --> 
 
    <ul class="box"> 
 
    <li><a href="#">New Patient Register</a> 
 
    </li> 
 
    <li><a href="#">Old Patient Register</a> 
 
    </li> 
 
    <li><a href="#">Detail Patient Register</a> 
 
     <ul> 
 
     <li><a href="#">New Patient Report</a> 
 
     </li> 
 
     <li><a href="#">Old Patient Report</a> 
 
     </li> 
 
     <li><a href="#">Detail Patient Report</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 

 
    <li id="submenu-active"><a href="#">Report</a> 
 
     <!-- Active --> 
 
     <ul> 
 
     <li><a href="#">New Patient Report</a> 
 
     </li> 
 
     <li><a href="#">Old Patient Report</a> 
 
     </li> 
 
     <li><a href="#">Detail Patient Report</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>