Jquery需要向“添加额外的选择器”；“切换到”；功能？

我对java/jquery非常陌生，我正在尝试为一个漂亮的水平幻灯片导航菜单创建一个脚本。基本的滑动功能运行良好（通过mplungjan的一些漂亮代码），但我想添加一个额外的选择器元素，使导航菜单滑回

以下是当前代码：

$(function() {                      
  $('.icon').on("click",function(e) {
      if ($(this).data("show")=="no") {
        $('.nav').css({left:'0'});
        $(this).data("show","yes");
      }   
      else {
        $('.nav').css({left:'16%'});
        $(this).data("show","no");     
      }
  });
});

当前，.icon元素触发幻灯片的打开和关闭

我的问题是：如何添加一个额外的元素使菜单幻灯片关闭，但只有当它打开时才起作用？ie您可以单击.icon打开它，然后单击另一个div将其关闭-但此div仅在导航菜单打开时才起作用

谢谢

编辑：

jsfiddle：

• 同样，这部分工作正常。我只想添加通过单击其他任何位置来关闭菜单的功能，条件是菜单处于打开状态

如果使用，您可以这样完成：

$(function(){
    $('.icon').on('click',$('.nav').slideToggle);
    $('.otherSelector').on('click',$('.nav').slideUp);
});

该元素只有在当前显示时才会向上滑动。否则，对于当前代码，您可以检查css left属性，并在设置为16%时将其关闭

$('.otherSelector').on('click',function(){
    var $nav = $('.nav');
    if($nav.css('left') == '16%'){
        $.nav.css('left','0');
        $('.icon').data('show','yes');
}); 

HTML：将开始的

数据显示

更改为

是

：

<div class="nav" data-show="yes">

---

说明：当您想创建另一个元素（在我的示例中，一个元素的类为

其他

）时，只需关闭菜单，您只需将其添加到单击事件中（因此，

'.icon、.other'

部分），但仅当单击的元素不是具有

其他

部分时，才调用打开部分（因此，

if

和检查

$（this.）的
是（'.other'）
）.
请发布您的HTML。您可能只需要为菜单添加一个切换。您实际上不需要设置变量来存储可见性状态。当您使用jQuery时，您可以轻松确定某些内容是否可见。从这一点来看，您可以只使用切换。jQuery内置了一个切换，您可以使用它吗？然后在另一个元素上，您可以使用它只需调用
slideUp（）
只有在openSlide函数不合适时，它才会向上滑动-我是水平滑动，而不是向上或向下滑动down@MelanciaUK切换函数在v1.9中被弃用…因此需要找到不同的、更复杂的解决方案是的！这正是我想要的。我相信你是对的，它可能有很多问题它-这只是我第二天玩jquery…我的意思是我必须改变不止一件事才能得到你想要的。但是，嘿，第二天？你做得很好。我花了很长时间才真正掌握它。：）是的，它工作得很好。我使用#frame div作为第二个元素，因此您只需单击任意位置即可关闭菜单。下一个挑战。。。弄清楚如何将其与媒体查询联系起来_
$('.icon,.other').on("click", function (e) {
    if ($('.nav').data("show") == "no") {
        // close event
        $('.nav').css({ left: '0' });
        $('.nav').data("show", "yes");
    } else {
        // open event
        if ($(this).is('.other')) { // dont open when .other
            return;
        }
        $('.nav').css({ left: '16%' });
        $('.nav').data("show", "no");
    }
});