Jquery - 在点击功能上使用'显示'和'隐藏'

我有一个动画导航（http://tympanus.net/codrops/2011/03/16/expanding-image-menu/）并对其进行了修改，所以我在左侧有一个推子。我希望它做的是当菜单处于展开状态时隐藏，当菜单折叠时显示。这里是我迄今写的代码：Jquery - 在点击功能上使用'显示'和'隐藏'

$menuItemsImgWrapper.on('click', function() { 
    if ($('.ei_descr').is(':visible')) { 
     $('#fader').hide(); 
    } else { 
     $('#fader').show(); 
    } 
});

推子隐藏正常，但不会显示。如果有人能给我一个线索，为什么这是，我真的很感激它。感谢您的时间。

来源

2013-11-22 Nikki_Heights

你能发布相应的HTML也？或者一个工作演示/小提琴 –

检查什么插件不处理打开/关闭文本：

$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) { 
    var $this = $(this).parent(), 
    idx  = $this.index(); 

    if(current === idx) { 
     slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true); 
     current = -1; 
    } 
    else{ 
     if(validCurrent() && current !== idx) 
       slideOutItem($menuItems.eq(current), false, 250, 'jswing'); 

     current = idx; 
      slideOutItem($this, true, 250, 'jswing'); 
    } 
    return false; 
});

为什么你不使用该事件，并且如果/ else隐藏#fader？

像

$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) { 
    var $this = $(this).parent(), 
    idx  = $this.index(); 

    if(current === idx) { 
     //then it collapses the text 
     $('#fader').hide(); 
    } 
    else{ 
     //then it expands the text 
     $('#fader').show(); 
    } 
    return false; 
});

来源

2013-11-22 17:20:51 arieljuod

这很棒！谢谢，不敢相信我没有想到！你是一个救星！ –

请接受答案为正确的，那么欢迎您 – arieljuod

这是我第一次使用这个网站...所以，因为我不能投票，我只是检查复选标记。再次感谢！ –

这是因为具有类“.ei_descr”的元素仍然可见。您只声明隐藏ID为“#fader”的元素。

因此，if语句中的代码将始终评估为true，除非您还隐藏“.ei_descr”。

来源

2013-11-22 15:06:59 pdp2

好的...我修改了代码，但仍然有同样的问题。我对看到的jquery很陌生，现在仍在努力掌握它的工作原理。感谢您的回应，我会继续尝试不同的变化。 $ menuItemsImgWrapper.on（ '点击'，函数（）{ 如果（$（）是（ '：可见 '））{$ （）显示（）; $ 'ei_descr。'。' ei_descr。'。（ '#fader'）隐藏（）; \t \t \t \t \t \t }其他{$ 隐藏（）（ 'ei_descr。 '）; $（' ＃推子'）显示（）;} \t \t \t \t \t \t }）; –

看起来像你仍然没有隐藏它。应该是：if（$（'。ei_descr'）。is（'：visible'））{$（'。ei_descr'）。hide（）; – pdp2

：可见检查不透明度和可见性。fade（）虽然将对象变成display：none ;.所以你的物体是可见的，但不显示在显示器上。

来源

2013-11-22 15:09:55 MentalRay

只是使用jQuery的切换方法：

$menuItemsImgWrapper.on('click', function() { 
    $('#fader').toggle(); 
});

它会隐藏#fader如果它是可见的，并显示它是否隐藏

来源

2013-11-22 15:25:06 arieljuod

由于导航栏的性质，使用切换功能不是一个选项。推子div位于导航菜单的左侧。导航菜单展开并覆盖推子div，并且如果每次单击“menuItemsWrapper”时都触发点击功能，则最终显示在导航菜单上。 –

使用插件用于检测开启/关闭的代码添加了另一个答案 – arieljuod

Jquery - 在点击功能上使用'显示'和'隐藏'

回答

相关问题