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

How to make a dynamic accordion menu with jQuery

本文关键字：动态 手风琴 菜单 何使用 jQuery      更新时间：2023-09-26

假设我有以下菜单结构。我有 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();等？

谁能帮我解决这些问题？

提前致谢

您可以使用

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>

    • 相关文章：