jQuery toggle element with same class

StackOverflow https://stackoverflow.com/questions/22465912

문제

I have some nested lists that are hidden.

When the parent li is clicked then sublist should be shown.

If another parent li is clicked then any open sublists should shut and only the sublist closest to the clicked parent li should open.

I can get all of the above to work, however, if I click on a parent li and expand the sublist, if I then click the same parent li to close the sublist , the sublist shuts and then opens again.

Any ideas how I can get this to work?

<!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 is here: http://jsfiddle.net/Q53AJ/

도움이 되었습니까?

해결책

I changed a little bit your code.

It seems that the error is not excluding the clicked element of the slideUp

So i added

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

Also using slideToggle() will do the work to close or open the current <ul>

To exclude it from the selected elements. The same was made on the $(".sub_click").click()

Fiddle

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top