javascript - 单击子菜单未打开页面它隐藏了 HTML 中的子菜单

Question

您好，我已经创建了一个下拉侧边栏菜单，但是当我单击主菜单时出现问题，它正确显示子菜单，但问题是当我单击子菜单时，它没有打开它被隐藏的链接。这是的代码。

<aside id="sidebar-wrapper">
            <div class="sidebar-brand">
              <h2>Materno Platform</h2>
            </div>
            <ul class="sidebar-nav">
                <li><a href="index.html">Dashboard</a></li>
                <li><a href="#">Customers</a></li>
                <li><a href="#">providers</a></li>
                <li><a href="#">User Management</a></li>
                <li><a href="#">Plans</a></li>
                <li class="has-ul"><a href="#">Order Fullfillment<i class="fa fa-plus"></i></a>
                  <ul class="sub-ul">
                    <li><a href="#">Plan Purchases</a></li>
                    <li><a href="#">Med Orders</a></li>
                    <li><a href="#">Lab Orders</a></li>
                    <li><a href="#">predictive Analytics</a></li>
                  </ul>
                </li>
                <li class="has-ul"><a href="#">Master Data Management<i class="fa fa-plus"></i></a>
                  <ul class="sub-ul">
                    <li><a href="careplans.html">Care Plans</a></li>            
                  </ul>
                </li>
                <li><a href="#">Transcriptions</a></li>
                <li><a href="profile.html">Profile</a></li>         
            </ul>
        </aside>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script type="text/javascript">
  $("#sidebar-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
  });
  $('li.has-ul').click(function() {
  $(this).children('.sub-ul').slideToggle(500);
  $(this).toggleClass('active');
  event.preventDefault();
  });

fiddle 链接:https://jsfiddle.net/3yfdcto0/1/

Answer 1

改变 Jquery

$('li.has-ul a').click(function() {
  $(this).parent().find('.sub-ul').slideToggle(500);
  $(this).parent().toggleClass('active');
  /*event.preventDefault();*/
});

https://jsfiddle.net/lalji1051/kp8x4e7w/4/