Question

我对jQuery“toggle”方法有一个神秘的问题。我点击一次，但它动画两次。去看看吧！

页面来源粘贴在下面，（当我解决了这个问题后，链接就会消失。）

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;    
}

代码

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

Answer 1

使用.parents()定位一个特定父级而不是多个父级。

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

我猜这个版本存在问题，当您从多个祖先执行.find()时，会将重复元素添加到集合中。

Answer 2

不知道你的发现是错的，我把你的代码放到了jsfiddle，它运行正常。您网页上还有其他内容可能会干扰此代码吗？

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

查看您的链接页面，我看到您正在谈论的内容。不确定是什么导致它...调查...

看起来你正在使用超级旧版本的jQuery 1.2.3。尝试升级。

看起来使用1.3之前的jQuery会导致问题。

Answer 3

我无法复制这个：

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

尝试通过在jQuery脚本标记中包含此链接来将您的jQuery版本更新为1.5：

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

当你这样做时，你应该考虑使用closest()方法，而不是调用返回元素的所有祖先的parents()。

Answer 4

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

编辑：此外你可能想要做这样的事情，否则如果你想在多个父项目上使用subnavs你会遇到问题：

    <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>

Answer 5

现在工作正常。 See!
我做的第一件事是更新我的jquery文件。愚蠢的我没有检查。仅这一改变使它运作良好。但我也将我的代码更新为：

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

但我似乎使用closests（）而不是parent（）就可以做到这一点。像这样：

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

感谢快速回答！

jQuery切换问题：动画两次

5 个答案: