Javascript Jquery函数中的一个动作在另一个动作之前

我希望当我点击“导航切换”时，它会将切换类“打开”添加到“grappa”。然后，我想删除切换类“打开”点击网页上的任何地方

这是我写的，但不起作用

$(function() {
        $('.nav-toggle').on('click', function(){
            $('.grappa').toggleClass('open');{
                $(document).click(function() {
                $('.grappa').toggleClass('close');
             });
            }
        });

    });

写单独的事件

切换

  $('.nav-toggle').on('click', function(){
        $('.grappa').toggleClass('open');
    });

在网页上的任何位置单击

$( document.body ).click(function() {
    $('.grappa').toggleClass('close');
});

正在调用脚本的Keep Alert/Console语句。在网页中引用js应该是正确的

更新

---

查看此小提琴

在切换

关闭

类之前，您可以检查

图形

元素是否具有

打开

类。然后，只有在

open

已经被切换的情况下，

close

类才会被切换。比如：

$(function() {
    $('.nav-toggle').on('click', function(){
        $('.grappa').toggleClass('open');
    });

    $(document).click(function() {
        if ($('.grappa').hasClass('open'))
        {
            $('.grappa').toggleClass('close');
        }
    });

});

$(document).click(function() {
     if ($('.grappa').hasClass('open'))
     {
          $('.grappa').removeClass('open');
     }
});

另外，由于我没有看到您的css或html，我不确定您是如何使用

open

和

close

类的，但是根据元素是否具有该类，添加和删除

open

类似乎更有意义。比如：

$(function() {
    $('.nav-toggle').on('click', function(){
        $('.grappa').toggleClass('open');
    });

    $(document).click(function() {
        if ($('.grappa').hasClass('open'))
        {
            $('.grappa').toggleClass('close');
        }
    });

});

$(document).click(function() {
     if ($('.grappa').hasClass('open'))
     {
          $('.grappa').removeClass('open');
     }
});

---

请解释预期的完整行为，并提供示例html结构。看看为什么要嵌套第二次单击？问题？给我更多的细节，我更新了。看看你是否能理解@TharunThis仍然没有适当地详细说明，您已经不得不在答案中添加注释，因为您没有正确解释完整的预期行为，或者没有以这种方式提供任何html示例。它不起作用，因为.nav toggle位于正文中，单击此处可同时执行这两个功能。我认为解决方案是，只有在第一次单击.nav切换并添加Fiddle后，才启用第二个功能。我可以帮你的忙