關閉使用jquery SLIDETOGGLE // visible/hide之前的幻燈片之前所有的幻燈片？

我在開啓/關閉div的同時出現問題。我讀過很多關於它，並試圖像一切，但似乎沒有任何工作......這是它應該是怎樣的樣子：關閉使用jquery SLIDETOGGLE // visible/hide之前的幻燈片之前所有的幻燈片？

這是我得到的代碼。它完美地與一個DIV：

$(document).ready(function(){ 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

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

我想這與3周的div或多個工作：當前開啓的分度滑動一旦一個新的鏈接被點擊關閉並在div來了一個滑動。

很高興收到你的來信:-)非常感謝你！

來源

2012-09-21 rekeszus

如果我理解正確的話，我認爲你這樣的事情之後是：

$('a.link').on('click', function(e) { 

    e.preventDefault(); 
    var slideSelector = '#' + $(this).attr('id').replace('link', 'slide'); 

    // slide down the div which corresponds to the clicked anchor, 
    $(slideSelector).slideDown(500, function() { 
    // slide the rest up 
    $('div.slide').not($(slideSelector)).slideUp(500); 
    }); 

    // or do it in the reverse order 
    $('div.slide').not($(slideSelector)).slideUp(500, function() { 
    $(slideSelector).slideDown(500); 
    });  

});

下面是我用上面的例子中的標記： -

<a id="link1" class="link" href="#">Link 1</a> 
<a id="link2" class="link" href="#">Link 2</a> 
<a id="link3" class="link" href="#">Link 3</a> 

<div class="slide" id="slide1">Slide Example #1</div> 
<div class="slide" id="slide2">Slide Example #2</div> 
<div class="slide" id="slide3">Slide Example #3</div>

注意，<a>的和<div>已經全部給出了id的，這些都是用來把兩者聯繫在一起的（看看slideSelector）。

Here's a fiddle which will toggle between each of the above examples each time a link is clicked

這是做的只是一種方式，另一種方式，例如將包裹在單獨的容器中的鏈接和div的，然後才能使用index()來選擇對應於點擊的div鏈接，但鏈接和div必須以相同的順序出現才能工作。

來源

2012-09-21 10:50:30 billyonecan

嗨deifwud，非常感謝你的回答！這幾乎是完美的：P只是一件事：可以按照這個順序打開/關閉div嗎？單擊 - >顯示div完全關閉（滑動） - >新的div打開（滑動）。很想聽到你的聲音！ – rekeszus

$(".slidingDiv2").slideToggle();嘗試添加此行。希望它可以幫助。

確定我沒有得到你的第一次，所以我剛剛發佈的那部分：添加此 $('.menu').click(function(){ $(".slidingDiv").slideToggle(); $(".slidingDiv2").slideToggle(); }); 這將幫助。實際上你的代碼首先是在類show_hide中單擊。如果你想讓你的超鏈接工作，你可以在超鏈接上使用這個類。

來源

2012-09-21 10:13:38

謝謝！ [** DEMO **]（http://jsfiddle.net/nGabd/19/）這會關閉打開的div，但我怎樣才能做到這一點點擊單獨的鏈接？ – rekeszus

我已更新代碼rekeszus –

關閉使用jquery SLIDETOGGLE // visible/hide之前的幻燈片之前所有的幻燈片？

回答

相關問題