Question

我试图制作一个菜单，其中包含2个带子菜单的链接。默认情况下禁用2个链接。当您单击第一个链接时，子菜单应显示并启用链接。这工作正常。但是，当你点击第二个链接时，第一个＆＃34;链接应该重置（第一个链接应该禁用）。这是不起作用的事情。点击第二个链接后，第一个链接在点击时根本不做任何事情。有人可以帮我解决这个问题吗？我发布了以下代码。

提前致谢。

<div id="menu">
    <ul>
        <li><a class="link1" href="link1.html">link1</a></li>
        <li><a class="link2" href="link2.html">link2</a></li>
    </ul>
</div>
<div id="submenu">
    <li><a href="link.html">link</a></li>
    <li><a href="link.html">link</a></li>
    <li><a href="link.html">link</a></li>
</div>
<div id="submenu2">
    <li><a href="link.html">link</a></li>
    <li><a href="link.html">link</a></li>
    <li><a href="link.html">link</a></li>
</div>

<script type="text/javascript">

    $(document).ready(function () { 
        $(".link2, .link1").bind("click", function(e){
            e.preventDefault();
        })

        $( ".link2" ).click(function() {
            $( "#submenu").delay(300).fadeIn();
            $(".link2").unbind("click");
            $( "#submenu2").fadeOut();
            $(".link1").bind("click", function(e){
                e.preventDefault();
            })
        })

        $( ".link1" ).click(function() {
            $( "#submenu2").delay(300).fadeIn();
            $(".link1").unbind("click");
            $( "#submenu").fadeOut();
            $(".link2").bind("click", function(e){
                e.preventDefault();
            })
        })
    });
</script>

Answer 1

为什么要取消绑定点击事件？

我猜你不希望动画重新开始。但是，您必须知道fadeIn和fadeOut不会。如果元素已经显示，fadeIn将不执行任何操作。如果元素已被隐藏，则fadeOut都不会。

您应该使用fadeOut回调函数，而不是delay(300)。它更好。

然后，您可以这样做：

$( ".link1" ).click(function(e) {
    $( "#submenu2").fadeOut(function(){
        $( "#submenu").fadeIn();
    });
    e.preventDefault();
}); 

$( ".link2" ).click(function(e) {
    $( "#submenu").fadeOut( function(){
          $( "#submenu2").fadeIn(); 
    });
    e.preventDefault();
});

请参阅jsFiddle

如果你真的想阻止第二次点击同一个链接，你必须使用一个标志来保存元素状态。将其保存在每个submenu的数据集中。

有类似的东西：

$( ".link1" ).click(function(e) {
    if (!$("#submenu").data('visible')) {
        $( "#submenu2").fadeOut( function(){
            $( "#submenu").fadeIn().data('visible',true);
        }).data('visible',false);
    }
    e.preventDefault();
}); 

$( ".link2" ).click(function(e) {
    if (!$("#submenu2").data('visible')) {
        $( "#submenu").fadeOut(function(){
            $( "#submenu2").fadeIn().data('visible',true);
        }).data('visible',false);
    }
    e.preventDefault();
});

查看此其他jsFiddle

您可以使用.is(":hidden")选择器，但如果在上一个动画仍在运行时点击附加，则会失败。

JQuery禁用链接/单击功能无法正常工作

1 个答案: