jQuery toggle problem: animates twice_问答_开发者

I have a t开发者_如何学JAVAo me mystic problem with jQuery "toggle" method. I click it once, but it animates twice. Go see for yourself!

Demo

Page source is pasted below, (link will disappear when I have solved this).

html:

<ul class="topnav"> 
    <li><a>About us</a></li> 
    <li><a href="javascript:Void(0)" class="sublink">Store</a></li> 

        <li class="subnav"><a href="javascript:void(0)">Hours</a></li> 
        <li class="subnav"><a href="javascript:void(0)">Products</a></li> 

    <li><a href="javascript:void(0)">@the Moment!</a></li> 
    <li><a href="javascript:void(0)">Contact</a></li> 
</ul>

CSS

a{
    text-decoration: none;
    color: black;
}
a:hover{
    color: #CEDE43;
}
ul.topnav{
    list-style: none;
    margin: 0;
    padding: 20px;
    float: left;
    font-family: 'arial', sans-serif;
    font-weight: bold;                   
    font-size: 20px;          
}
ul.topnav li{            
    float: left;
    margin-right: 20px;
    position: relative;                             
}
li.subnav{
    display: none;      
    font-family: 'Courier New', serif;    
}

Code

 $(document).ready(function(){
        $("a.sublink").click(function(){
            $(this).parents().find("li.subnav").toggle('slow');
        });        
    });

Target one specific parent instead of several with .parents().

$("a.sublink").unbind().click(function(){
    $(this).parents("ul").find('.subnav').toggle(200);
});

I'm guessing it's an issue with that version where duplicate elements are added to the set when you do the .find() from multiple ancestors.

I can't replicate this:

http://jsfiddle.net/treeface/tm5vQ/

Try updating your version of jQuery to 1.5 by including this link in your jQuery script tag:

http://code.jquery.com/jquery-1.5.min.js

When you do that, you should look into using the closest() method instead of calling parents() which returns all ancestors of an element.

Don't know what your finding is wrong, I put your code into jsfiddle, and it works fine. is there something else on your page that may be interfering with this code?

http://jsfiddle.net/ZCVac/1/

Looking at your linked page I see what you're talking about. Not sure what's causing it... investigating...

It looks like you're using a super old version of jQuery 1.2.3. Try upgrading that.

Looks like using jQuery previous to 1.3 causes the problem.

    $(document).ready(function(){
        $("a.sublink").click(function(){
            $(this).parent("li").siblings(".subnav").toggle(200);
        });
    });

EDIT: Additionally you may want to do something like this otherwise you are going to run into problems if you want subnavs on more than one parent item:

    <script src="./Menu problem_files/jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){
            $("a.sublink").click(function(){
                $(this).siblings().find(".subnav").toggle(200);
            });
        });

    </script>
</head>
<body>
    <ul class="topnav">
        <li><a>About us</a></li>
        <li><a href="javascript:Void(0)" class="sublink">Store</a>
            <ul>
                <li class="subnav" style="display: block; "><a href="javascript:void(0)">Hours</a></li>
                <li class="subnav" style="display: block; "><a href="javascript:void(0)">Products</a></li>
            </ul>
        </li>

        <li><a href="javascript:void(0)">@the Moment!</a></li>
        <li><a href="javascript:void(0)">Contact</a></li>
    </ul>

</body>

Its working fine now. See!
The first thing I did was update my jquery file. Stupid of me to not check that. That change alone made it work fine. But i also updated my code to:

        $(document).ready(function(){
           $("a.sublink").click(function(){
              $(this).parent("li").siblings(".subnav").toggle(200); 
           });        
        });

But I seems like using closests() instead of parents() would have done the trick just as good. Like this:

        $(document).ready(function(){
            $("a.sublink").click(function(){
                $(this).closest("ul").find(".subnav").toggle(200); 
            });        
        });

Thanks for the fast answers!