javascript - 如何使用 jQuery 制作动态 Accordion 菜单

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. 当您点击菜单项 1 时，子菜单项 1 也会打开。如何预防？;
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 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">

	<ul id="nav">
		<li><a href="#">My Name</a></li>
		<li>About U
			<ul>
				<li>How U?
					<ul>
						<li><a href="#">Your Extras</a></li>
					</ul>
				</li>
				<li><a href="#">Howz U?</a></li>
			</ul>
		</li>
		<li><a href="#">More</a></li>
	</ul>

</div>