Jquery 需要向“切换”功能添加额外的选择器吗？答案

【问题标题】：Jquery need to add additional selectors to a "toggled" function?Jquery 需要向“切换”功能添加额外的选择器吗？
【发布时间】：2014-01-11 05:14:25
【问题描述】：

我对 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 元素触发幻灯片的打开和关闭。

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

谢谢

编辑：

jsfiddle：http://jsfiddle.net/JNGVB/

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

【问题讨论】：

请发布您的 HTML。您可能应该为您的菜单添加一个切换按钮
您实际上不需要设置变量来存储可见性状态。当您使用 jQuery 时，您可以轻松地找出某些东西是否可见。从这一点开始，您可以只使用一个切换开关。
jQuery 内置了Sliding，你能用它吗？然后在另一个元素上，您只需调用slideUp()，它只会在打开时向上滑动
滑动功能不合适 - 我是水平滑动，不是向上或向下滑动
@MelanciaUK 切换功能在 v1.9 中已被弃用...因此需要找到不同的、更复杂的解决方案

标签： jquery html css

【解决方案1】：

Your fiddle, updated.

HTML：将起始data-show 更改为yes：

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

JavaScript：向选择器添加另一个类（'.icon,.other'），以获取data 属性，使用$('.nav') 代替$(this)，并放置if 以仅在.icon 时触发关闭：

$('.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");
    }
});

解释：因为你想让另一个元素（在我的例子中，一个类other的元素）只关闭菜单，你应该把它添加到点击事件中（因此'.icon,.other' 部分），但仅在单击的元素不是带有.other 的元素时才调用开头部分（因此if 带有检查$(this).is('.other')）。

【讨论】：

是的！这正是我一直在寻找的。我相信你是对的，它可能有很多问题——这只是我第二天搞乱 jquery...
我的意思是我必须改变不止一件事才能让它完全像你想要的那样。但是，嘿，第二天？你做得很好。我花了很长时间才真正掌握它。 :)
是的，它运作良好。我使用#frame div 作为第二个元素，因此您只需单击任意位置即可关闭菜单。下一个挑战...弄清楚如何将其与媒体查询联系起来_

【解决方案2】：

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

$(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');
});

【讨论】：