我正在尝试通过单击来显示子菜单来创建一个简单的移动下拉菜单。我只希望在单击时调用具有子菜单的 jQuery ul 元素,然后只能访问它们下面的 li。简而言之,我单击一个按钮,然后显示该按钮的下拉菜单。
如果可能的话,我不想用 ID 来命名它们。我想让它更通用,所有 ul 菜单都可以使用。
这是我尝试过的 jQuery 脚本之一。调用 html 和 css 的 jQuery 行都不起作用。
$('nav ul > li > ul > li.active').click(function() {
alert("It worked! ");
$('ul > li').show();// This also does not work.
});
这是导航菜单。
<nav>
<ul>
<li><a href="home">Home</a></li>
<li><a href="mission">Mission</a></li>
<li><a href="co-op">Co-op</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="hybrid-model">Hybrid Model</a></li>
<li><a href="classical-education">Classical Education</a></li>
<li><a href="courses">Courses</a></li>
<li><a href="tuition">Tuition</a></li>
<li><a href="uniforms">Uniforms</a></li>
<li><a href="staff">Staff</a></li>
<li><a href="documents">Ducuments</a></li>
</ul>
</li>
<li><a href="Catechesis-of-The-Good-Shepherd">Catechesis of The Good Shepherd</a>
<ul>
<li><a href="what-is-cgs">What Is CGS?</a></li>
<li><a href="level-1">Level 1</a></li>
<li><a href="level-2">Level 2</a></li>
<li><a href="level-3">Level 3</a></li>
<li><a href="uniforms">Uniforms</a></li>
<li><a href="atrium-child">The Atrium Child</a></li>
<li><a href="atrium-adult">The Atrium Adult</a></li>
</ul>
</li>
<li><a href="about">About Us</a>
<ul>
<li><a href="board-members">Board Members</a></li>
<li><a href="Pro-Ecclesia-Sancta-Catholic-Advance-Movement">Pro Ecclesia Sancta /<br>Catholic Advance Movement</a></li>
</ul>
</li>
<li><a href="contact">Contact</a></li>
</ul>
</nav>
最佳答案
这是一个解决方案,我没有使用 ID,而是使用类:
$('li.dropdown').click(function() {
$('.dropdown.dropdown-open').removeClass('dropdown-open');
$(this).toggleClass('dropdown-open');
});
我不知道你试图用你的 JS 实现什么,因为你不能点击隐藏的东西。因此,您需要单击具有 ul 的 li。你也可以在没有我使用的类的情况下这样做:
$('li').click(function() {
if ($(this).find('ul')){
$('nav > ul > li > ul').hide();
$(this).find('ul').show();
}
});
关于带有链接的 jQuery ul - 只影响 li child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32298005/