多重顯示和隱藏和關閉觸發

我已經結合了顯示和隱藏功能在我的網站Click here - 點擊工作標籤，並與我們聯繫標籤一件事我有這個發現觸發隱藏隱藏div做不按我想要的方式工作。例如，當您單擊工作選項卡時，點擊聯繫我們選項卡關閉工作隱藏div，反之亦然。有誰知道我可以做到這一點。多重顯示和隱藏和關閉觸發

這裏是我的HTML：

<ul class="nav-bar"> 
<li><a class="show_hide" href="#">work</a></li> 
<li><a class="show_hide-2" href="#">contact us</a></li> 
</ul>

這裏是我的JS

$(document).ready(function(){ 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 
    $('.show_hide').click(function(){ 
    $(".slidingDiv-2").hide(); 
    $(".slidingDiv").slideToggle(); 
     }); 


$(".slidingDiv-2").hide(); 
$(".show_hide-2").show(); 
$('.show_hide-2').click(function(){ 
$(".slidingDiv").hide(); 
$(".slidingDiv-2").slideToggle(); 
}); 
});

而且我已經加入顯示：無; show_hide和show_hide-2然而，當你加載網站時還有一個輕微的動畫，有沒有辦法解決這個問題？

來源

2012-11-12 NewBoy

將其更改爲：

$('.show_hide').click(function(){ 
    $(".slidingDiv-2").hide(); 
    $(".slidingDiv").slideToggle(); 
});

而且

$('.show_hide-2').click(function(){ 
    $(".slidingDiv").hide(); 
    $(".slidingDiv-2").slideToggle(); 
});

您可以將div S的（在HTML或內聯）的CSS設置爲display:none;隱藏div S中的JavaScript邁出前效果，當頁面加載。

來源

2012-11-12 11:38:27 irrelephant

你的意思是：$（文件）。就緒（函數（）{ $（「slidingDiv。」）隱藏（。）; $（「show_hide。」）顯示（）; 'show_hide'。 $（）點擊（函數（）{ \t $（」 slidingDiv-2" ）的hide（）; \t $（「.slidingDiv」）。slideToggle（）; }）; $（「。slidingDiv-2」）。hide（）; $（「。show_隱藏-2" ）顯示（）; （）。slideDiv-2「）。slideToggle（）; }）;（）。（」.show_hide-2「）單擊（函數（）{（」。slidingDiv「）。hide（）; $ }）; – NewBoy

@NewBoy yes（15char） – irrelephant

如果要隱藏動畫，可以將'.hide（）'更改爲'.slideUp（）'。 – irrelephant

您可以使用正則表達式，如果你有很多的標籤：

$(document).ready(function(){ 

$('[class^=slidingDiv]').hide(); 
$('[class^=show_hide]').show(); 

$('[class^=show_hide]').click(function(){ 
    $('[class^=slidingDiv]').hide(); 
    $(this).closest('[class^=slidingDiv]').slideToggle(); 
}); 

});

來源

2012-11-12 11:40:32

多重顯示和隱藏和關閉觸發

回答

相關問題