Javascript 尝试在同一个div上执行两个onclick操作时出错

我这里有个小问题，如果有人能帮助我，我会非常感激

我有一个菜单，当我点击一个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>

$（文档）.ready（函数（）{
$（“#菜单SP”）。单击（函数（）{
$（'profile_menu'）.css（'margin-left'，'0px'）；
$（'menuResp'）.css（'margin-left'，'315px'）；
$（'#menuResp'）.attr（'id'，'menuResp2'））
});
$（“#菜单P2”）。单击（函数（）{
$（'profile_menu'）.css（'margin-left'，'-300px'）；
$（'#menuResp2'）.css（'margin-left'，'0px'）；
$（'#menuResp2'）.attr（'id'，'menuResp'））
});
});


菜单

---

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

您的代码在构建初始DOM时设置回调。当然，目前还没有菜单。Insdead，在document元素（或body，或其他父元素）上设置回调，指定菜单的选择器-此元素将触发事件。这将有助于：

$(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属性，而是使用类。

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

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

.click（）

仅适用于已创建的图元，使用

。

将涵盖稍后创建的图元

---

不过，您确实应该按类来标识元素，并使用

.addClass（）

和

.removeClass（）

，就像注释建议的那样使用toggle。如果项目已关闭，它将打开；如果项目已打开，它将关闭。以上所有答案都不会检查项目是否已打开

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

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

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

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

$（“#menuResp2”）.attr（'id'，'menuResp'）

-不要这样做。改为添加/删除类、

.addClass（）

和

.removeClass（）