Question

我已经下载了Adminiziolite的网页模板。我想在客户端点击上创建一个显示/隐藏菜单项。我怎么能这样做？

Archive...

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

Answer 1

您可以隐藏/显示添加以下JavaScript和内联CSS的子菜单。

它是如何运作的：

隐藏子菜单项报告（使用内联css <ul style="display:none">）。
在菜单报告上添加事件监听器（单击）。
当用户点击菜单报告时，请检查变量isMenuReportVisible。
如果子菜单不可见，请将其显示，否则将其隐藏。

＆＃13;

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;
  }
});

＆＃13;

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

＆＃13;

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>

显示/隐藏客户端上的菜单项单击免费Adminiziolite模板

2 个答案: