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类关闭的元素。这也将同时关闭具有该类名的所有元素，并且也是打开的

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

3 个答案: