показать/скрыть пункты меню на клиенте щелкните по бесплатному шаблону Adminiziolite

Question

Я загрузил веб-шаблон Adminiziolite. Я пытаюсь создать пункты меню show/hide на клике. Как я могу это сделать?

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

Я пытаюсь показать/скрыть элементы меню под Раздел Report. На клике щелкните, должны отображаться элементы отчета, как я могу это сделать?

Answer 1

Вы можете скрыть/показать свое подменю, добавив следующий JavaScript и встроенный CSS.

Как это работает:

• Скрыть отчет пункт подменю (с помощью встроенного CSS <ul style="display:none">).
• Добавить прослушиватель событий (нажмите) в отчете вашего меню.
• Когда пользователь нажимает на отчет меню, проверьте переменную isMenuReportVisible.
• Если подменю не видно, сделайте его видимым, иначе скройте его.

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

Вы можете попробовать это.

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