Question

我试图在jquery中创建一个多级可扩展列表（有3个级别）。每当一个级别被扩展时，我希望所有其他可扩展列表（不是所单击项目的父级）崩溃。不幸的是，我无法实现这一点，每当我点击二级菜单项时，不仅所有其他菜单崩溃，而且还有所点击项目的父级（所以我看不到点击元素的第三级菜单）。

这里是我的代码

＆＃13;

$(".expandable a").click(function(event) {
  event.preventDefault();
  //check if the clicked item is an expandable
  if ($(this).parent('li').hasClass("expandable")) {
    //check if anmation still running
    if (!$(this).next('ul').is(':animated')) {
      //check if is expanded already or not
      if ($(this).next('ul').is(":visible") == true) {
        //hide content
        $(this).next('ul').slideUp(200, function() {
          // Animation complete.
        });
      } else {
        var clicked_obj = $(this);

        //hide all other contents
        $(".expandable a").each(function(index) {

          //check if current object is child of the clicked object, in that case dont collapse
          if ($(this).find('.expandable').find('a').is(clicked_obj)) {
            //dont collapse this one
          } else {
            $(this).next('ul').slideUp(200, function() {
              // Animation complete.
            });
          }
        });
        //show content
        $(this).next('ul').slideDown(200, function() {
          // Animation complete.
        });
      };
    };
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">

  <li>
    <a href=""><i class="fa fa-home fa-fw list-icon"></i>Overview</a>
  </li>
  <li class="expandable">
    <a><i class="fa fa-file fa-fw list-icon"></i>Files<i class="fa fa-angle-left pull-right"></i></a>
    <ul class="nav">

      <li>
        <a href="">Second level Link</a>
      </li>

      <li class="expandable">
        <a href="">Second level menu<i class="fa fa-angle-left pull-right"></i></a>
        <ul class="nav">
          <li>
            <a href="">Third Level Link</a>
          </li>
          <li>
            <a href="">Third Level Link<</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href=""><i class="fa fa-user-plus list-icon"></i>User Requests</a>
  </li>
  <li>
    <a href=""><i class="fa fa-bar-chart-o fa-fw list-icon"></i>Statistics</a>
  </li>
  <li class="admin_menu expandable">
    <a href=""><i class="fa fa-key fa-fw list-icon"></i>Administration<i class="fa fa-angle-left pull-right"></i></a>
    <ul class="nav">
      <li>
        <a href="">Second Level Link</a>
      </li>

      <li class="expandable">
        <a href="">Second Level Menu<i class="fa fa-angle-left pull-right"></i></a>
        <ul class="nav">
          <li>
            <a href="">Third Level Link<</a>
          </li>
          <li>
            <a href="">Third Level Link<</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

代码有效，除此之外＆＃34;如果＆＃34;：

//check if current object is child of the clicked object, in that case dont collapse
if ($(this).find('.expandable').find('a').is(clicked_obj)){...

我希望有人可以帮助我让我的菜单正常工作.. 提前谢谢！

Answer 1

我认为最好的代码是最短的代码，所以我以另一种方式做到了这一点。此通用代码适用于您想要的多个级别。

$(document).ready(function (){

// Hide all expandables menus at start
$('.expandable ul').hide();

// When click on .expandable > a element
$('.expandable > a').click(function(e) {
	
	// Close all expandable, excluding current parents and siblings
	$('.expandable ul')
		.not($(this).parents('ul'))
		.not($(this).siblings('ul'))
		.stop(true,true)
		.slideUp();

	// Toggle current submenu
	$(this)
		.next('ul')
		.stop(true,true)
		.slideToggle();
	
	return false;
});	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">

  <li>
    <a href=""><i class="fa fa-home fa-fw list-icon"></i>Overview</a>
  </li>
  <li class="expandable">
    <a href=""><i class="fa fa-file fa-fw list-icon"></i>Files<i class="fa fa-angle-left pull-right"></i></a>
    <ul class="nav">

      <li>
        <a href="">Second level Link</a>
      </li>

      <li class="expandable">
        <a href="">Second level menu<i class="fa fa-angle-left pull-right"></i></a>
        <ul class="nav">
          <li>
            <a href="">Third Level Link</a>
          </li>
          <li>
            <a href="">Third Level Link</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href=""><i class="fa fa-user-plus list-icon"></i>User Requests</a>
  </li>
  <li>
    <a href=""><i class="fa fa-bar-chart-o fa-fw list-icon"></i>Statistics</a>
  </li>
  <li class="admin_menu expandable">
    <a href=""><i class="fa fa-key fa-fw list-icon"></i>Administration<i class="fa fa-angle-left pull-right"></i></a>
    <ul class="nav">
      <li>
        <a href="">Second Level Link</a>
      </li>

      <li class="expandable">
        <a href="">Second Level Menu<i class="fa fa-angle-left pull-right"></i></a>
        <ul class="nav">
          <li>
            <a href="">Third Level Link</a>
          </li>
          <li>
            <a href="">Third Level Link</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

检查当前对象是否为多级列表

1 个答案: