如何使用jQuery制作动态手风琴菜单

Question

假设我有以下菜单结构。我有3个问题。

$('.parent ul').hide();

var current_parent;
$(document).delegate('.parent', 'click', (function() {
  var $this = $(this);
  
  if(current_parent !== undefined) {
    current_parent.find('ul').slideUp();
  }
  
  current_parent = $this;

  // Check if the element is visble or not
  if(!$this.find('ul').is(':visible')) {
    $this.find('ul').slideDown();
  } else {
    $this.find('ul').slideUp();
  }
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="parent">menu item1
    <ul>
      <li class="child">Sub menu item1</li>
      <li class="child parent">Sub menu item2
        <ul>
          <li class="child">Sub-sub menu item1</li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li class="parent">menu item2
    <ul>
      <li class="child">Sub menu item3</li>
    </ul>
  </li>
</ul>

1. 当您点击menu item 1时，Sub-sub menu item1也是。{ 打开。如何预防？;
2. 当您点击Sub menu item2时，menu item1也会关闭。如何预防？。
3. 如何让这更加动态，以便当我添加更深层次的菜单项时，菜单仍然有效，但无需添加如下内容：$('ul ul ul').slideDown();等。

有人可以帮我解决这些问题吗？

提前致谢

Answer 1

您可以使用jquery

创建下拉菜单

我已经给出了单独的HTML，CSS和JQuery代码，使用它并尝试理解它。

有一个外<div id="navigation"> and inside it their is an now in it every

is main menu item and in every

is sub menu item. Furthermore you can create sub menu in sub menu also by creating {{1} }

`。

in

$(document).ready(function () {

	$("li").click(function () {
		var x = $(this).children("a:first").attr("href");
		if (x != undefined)
			window.location.href = x;
	});

	$("#nav li").hover(function () {
		$(this).find("ul:first").css({
			visibility: "visible",
			display: "none",
		}).slideDown(400);
	}, function () {
		$(this).find("ul:first").css({ visibility: "hidden" });
	});

});

body {
	font-family: Calibri, Verdana;
	font-size: 16px;
	color: white;
}

a {
	color: inherit;
	text-decoration: none;
}

#navigation {
	height: 40px;
}

#nav {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#nav ul {
	list-style: none;
	margin: 10px 0px 0px -5px;
	padding: 0px;
	display: none;
}

#nav li {
	float: left;
	width: 150px;
	height: 30px;
	padding: 10px 0px 0px 5px;
	border: 0px solid transparent;
	border-right-width: 1px;
	border-right-color: gray;
	background-color: #6397CB;
}

#nav li ul li {
	width: 145px;
	height: 22px;
	padding: 10px 0px 8px 10px;
	border: 0px solid transparent;
	border-top-width: 1px;
	border-top-color: gray;
}

#nav li ul li ul {
	position: relative;
	top: -40px;
	margin-left: 145px;
	color: white;
}

#nav li ul li ul li {
	border: 0px solid transparent;
	border-left-width: 1px;
	border-left-color: gray;
	border-top-width: 1px;
	border-top-color: gray;
}

#nav li:hover {
	background-color: lightgray;
	cursor: pointer;
}

#nav li ul li:hover {
	color: black;
}