具有相同类的 jQuery 切换元素

标签 jquery html css toggle slidetoggle

我有一些隐藏的嵌套列表。

当点击父 li 时,应该显示子列表。

如果单击另一个父 li,则所有打开的子列表都应关闭,只有最靠近被单击父 li 的子列表应打开。

我可以使上述所有方法正常工作,但是,如果我单击父 li 并展开子列表,如果我随后单击相同的父 li 关闭子列表,子列表将关闭然后再次打开。

我有什么想法可以让它发挥作用吗?

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile Nav New</title>
<style>
.sub_list, .sub_sub_list {display:none;}
</style>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script> 
    $(document).ready(function($) {
        $(".sub_list").slideUp();
        $(".parent_click").click(function() {
            $(".sub_list").slideUp();
            $(this).closest(".parent").find(".sub_list").slideDown();

        return false;
  });
  $(".sub_click").click(function() {
        $(".sub_sub_list").slideUp();
        $(this).closest(".test").find(".sub_sub_list").slideDown();
  });
});
</script>

<body>

<div class="nav">
    <ul>
        <li class="parent">
            <a href="#" class="parent_click">Driving</a>
            <ul class="sub_list">
                <li class="test">
                    <a href="#" class="sub_click">Type of Car</a>
                    <ul class="sub_sub_list">
                        <li>List 1</li>
                        <li>List 2</li>
                        <li>List 3</li>                        
                    </ul>
                </li>
                <li class="test">
                    <a href="#" class="sub_click">Tracks</a>
                    <ul class="sub_sub_list">
                        <li>List 1</li>
                        <li>List 2</li>
                        <li>List 3</li>                        
                    </ul>                
                </li>
                <li class="teset">Type of driving</li>
            </ul>
        </li>            
        <li class="parent">
            <a href="#" class="parent_click">Flying</a>
            <ul class="sub_list">
                <li>Type of aircraft</li>
                <li>Type of flying</li>
            </ul>
        </li>            
        <li class="parent">
            <a href="#" class="parent_click">Pampering</a>
            <ul class="sub_list">
                <li>Pampering Type</li>
                <li>Treatment Type</li>
            </ul>
        </li>            
    </ul>
</div>
</body>    

JS fiddle 在这里:http://jsfiddle.net/Q53AJ/

最佳答案

我稍微修改了你的代码。

貌似错误是不排除slideUp点击的元素

所以我加了

$(".parent_click").not(this).next().slideUp()

同时使用 slideToggle()将完成关闭或打开当前 <ul> 的工作

将其从选定元素中排除。在 $(".sub_click").click() 上进行了同样的操作

Fiddle

关于具有相同类的 jQuery 切换元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22465912/

相关文章:

JQuery、High Charts,找不到功能?

JQuery:(window).resize 有效,(document).ready 无效

css - 为什么 margin auto 不能使包含图像链接的 div 居中

html - 我可以改进什么来进行响应式设计

css - 使 flex 元素拉伸(stretch)全高并垂直居中其内容

css - 结合。 SASS 中的(点)和 &(符号)

jquery - Grails:动态填充的表行不是Selectable&Clickable

javascript - javascript getAttribute 是否影响性能或触发布局?

html - 列表未正确定位在左浮动字段集周围

html - 创建动态重叠 div,它会根据内部内容改变高度