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

我很新的Java/jQuery的，我想创建一个漂亮的水平滑动导航菜单的脚本。基本幻灯片功能正常工作（通过由mplungjan一些不错的代码），但我想添加一个额外的选择元素，使导航菜单向后滑动Jquery需要添加额外的选择器到“切换”功能？

下面是当前的代码：

$(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/

再次，这部分工作正常。我只想添加关闭菜单的功能，通过点击任何其他地方，条件是打开菜单。

来源

2014-01-10 user3180105

java！= javascript –

请将您的HTML发布。您应该为菜单添加一个切换键 – Cam

您并不需要设置变量来存储可见性状态。当你使用jQuery时，你可以很容易地发现是否有可见的东西。从这一点，你可以使用一个切换。 – melancia

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')）。

来源

2014-01-10 21:14:25 acdcjunior

是的！这正是我所期待的。我相信你是对的，可能有很多问题 - 这只是我第二天搞乱jquery ... – user3180105

我的意思是我必须改变一个以上的东西才能像你想的那样改变它。但是，嘿，第二天？你做得很好。我花了相当一段时间才真正掌握了它。 :) – acdcjunior

我很好奇，它工作？ – acdcjunior

如果你使用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'); 
});

来源

2014-01-10 16:44:32

不，这些都不适合我 – user3180105

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

回答

相关问题