尝试对同一 div 执行两个点击操作时出错

Question

我这里有一个小问题，如果有人可以帮助我，我将不胜感激。

我有一个菜单，当我点击一个div时会打开，一旦打开，我想关闭菜单，再次点击同一个div。问题是我可以打开菜单，但无法关闭它。

这是我的代码：

<script>
$(document).ready(function () {
    $("#menuResp").click(function () {
        $('#profile_menu').css('margin-left','0px');
        $('#menuResp').css('margin-left','315px');
        $('#menuResp').attr('id', 'menuResp2')
    });

    $("#menuResp2").click(function () {
        $('#profile_menu').css('margin-left','-300px');
        $('#menuResp2').css('margin-left','0px');
        $('#menuResp2').attr('id', 'menuResp')
    });
});
</script>
<div id="menuResp">
    <ul id="menuRespCss">
      <li class="icon-css">
        <a>Menu</a>
      </li>
    </ul>
</div>

有人知道为什么这不起作用吗？

Answer 1

你的代码正在做的是在构建初始 DOM 的那一刻设置回调。当然，目前还没有 #menuResp2。Insdead，在文档元素（或正文或其他一些父元素）上设置回调，指定菜单的选择器 - 此元素将触发事件。这将起作用：

$(document).ready(function () {
    $(document).on('click', "#menuResp", function () {
        $('#profile_menu').css('margin-left','0px');
        $('#menuResp').css('margin-left','315px');
        $('#menuResp').attr('id', 'menuResp2')
    }).on('click', "#menuResp2", function () {
        $('#profile_menu').css('margin-left','-300px');
        $('#menuResp2').css('margin-left','0px');
        $('#menuResp2').attr('id', 'menuResp')
    });
});

但。我强烈建议不要更改 ID 属性，而是使用类。

Answer 2

您需要像这样添加单击处理程序

$(document).on('click', '#menuResp', function(){
        $('#profile_menu').css('margin-left','0px');
        $('#menuResp').css('margin-left','315px');
        $('#menuResp').attr('id', 'menuResp2');
});

.click()仅适用于已创建的元素，但使用 .on() 将涵盖稍后将创建的元素。

不过，您确实应该按类标识元素，并使用.addClass()和.removeClass()，如注释所示

Answer 3

只需使用切换。 如果项目已关闭，它将打开，如果项目打开，它将关闭。 上面的所有答案都不会检查该项目是否已打开。

$(document).on("click", function(e){
    e.preventDefault();
    $('#menuResp').toggle();
    $("##menuResp2").toggle();
})

更容易的是给元素一个类，只需在类名上切换一次，而不是更改项的 ID，这第二个项不会添加 avent 绑定。 但与此同时。 当您可以切换类时，您不需要 ID。 这样：

$(".clasname").toggle();

这将打开任何使用 clasname 类关闭的元素。 同时，这也将关闭具有该类名的所有元素，并且也处于打开状态