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 - 在點擊功能上使用'顯示'和'隱藏'

回答

相關問題