show/hide 客户端上的菜单项点击免费 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>

我正在尝试 show/hide 报告部分下的菜单项。在客户端点击时，应显示报告项目，我该怎么做？

Answer 1

您可以 hide/show 您的子菜单添加以下 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>

show/hide 客户端上的菜单项点击免费 Adminiziolite 模板

show/hide menu items on client click for free Adminiziolite template

javascript

asp.net

menuitem