Question

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

单击父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小提琴在这里：http://jsfiddle.net/Q53AJ/

Answer 1

我改变了你的代码。

似乎错误并未排除slideUp的点击元素

所以我添加了

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

同样使用slideToggle()将完成关闭或打开当前<ul>

的工作

从所选元素中排除它。同样是在$(".sub_click").click()

上进行的

Fiddle

具有相同类的jQuery切换元素

1 个答案: