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

小提琴链接：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/

Answer 2

我希望这会对您有所帮助。

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

单击子菜单而不打开页面，它正在用HTML隐藏子菜单

2 个答案: