Question

我是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/

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

Answer 1

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

Answer 2

<强> 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的元素）只关闭菜单，你应该将它添加到click事件中（因此'.icon,.other'部分），但是如果被点击的元素不是.other的那个元素，那么只调用开头部分（因此if带有检查$(this).is('.other')）。

Jquery需要在“切换”函数中添加其他选择器吗？

2 个答案: