jQuery - 點擊後顯示一個div並關閉其他

我正在構建我的個人網站，並且遇到了一個挑戰。我想這將是沒有這些，誰更熟悉的jQuery比我（不硬）;）jQuery - 點擊後顯示一個div並關閉其他

結構：

<a href>one</a> 
<div id="hidden_one></div> 

<a href>two</a> 
<div id="hidden_two></div> 

<a href>three</a> 
<div id="hidden_three></div> 

<a href>four</a> 
<div id="hidden_four></div>

等換句話說每一個「a」是始終顯示，並在下面附上div。

行動：

點擊任何「A」之後：

如果點擊「是」有一個如下圖所示的div - 關閉DIV

如果點擊「是」不有一個下面顯示的div，但還有其他div顯示 - 隱藏這些div並顯示附加到這個「a」的。

如果沒有div顯示 - 顯示一個附加到這個「a」。

我將不勝感激任何支持！ :)

來源

2014-04-18 user3547962

最好使用href標記：看看這裏

HTML：

<a href="hidden_one">one</a> 
<div id="hidden_one">Hide 1</div> 

<a href="hidden_two">two</a> 
<div id="hidden_two">Hide 2</div> 

<a href="hidden_three">three</a> 
<div id="hidden_three">Hide 3</div> 

<a href="hidden_four">four</a> 
<div id="hidden_four">Hide 4</div>

的JavaScript：

$('a').on('click',function(e) { 
     e.preventDefault(); 
     var href = $(this).attr("href"); 
     $("#" + href).slideToggle().siblings('div').hide(); 
    });

DEMO

來源

2014-04-18 08:08:22 devqon

試試這個

$('a').on('click',function(e) { 
    e.preventDefault(); 
    $(this).next('div').slideToggle().siblings('div').hide(); 
});

DEMO

來源

2014-04-18 07:38:07

好了，你可以做到這一點的方便，快捷的方式。或者你花了一些額外的努力，並建立良好的HTML和安全。也許http://jsfiddle.net/veritas87/qLPge/2/

$(document).ready(function(){ 
    $('a.clickme').on('click', function(e){ 
     $('div.active').removeClass('active').fadeOut(); 
     $(this).next('.showme').addClass('active').fadeIn(); 
     e.preventDefault(); 
    }); 
});

來源

2014-04-18 07:43:54

謝謝！它像魅力:)

我做了一個小的修改：

$('a').on('click',function(e) { 
    e.preventDefault(); 
    var href = $(this).attr("href"); 
    $("#" + href).slideToggle().siblings('div').slideUp(); 
});

http://jsfiddle.net/4qTeD/2/

來源

2014-04-20 22:56:40 user3547962

jQuery - 點擊後顯示一個div並關閉其他

回答

相關問題