JQuery切換Divs基於索引不單擊時兩次點擊

Question

並感謝您閱讀此問題。讓我通過說我不是程序員並且只是試圖學習JavaScript來使我自己的網站看起來和按照我想要的方式工作來做序。

我有一個頁面有幾個隱藏的divs。我使用的是同一類的元素和不同的目標來觸發這個jQuery

jQuery(function() { 
jQuery('.nav').click(function() { 
    var index = $(this).index(), 
     newTarget = jQuery('.targetDiv').eq(index); 
    jQuery('.targetDiv').not(newTarget).slideUp('fast') 
    newTarget.delay('fast').slideToggle('fast') 
    return false; 
    }) 
}); 

所以我的「.targetDiv」 S看起來就像這樣：

<div class=".targetDiv" style="display:none">div1</div> 
<div class=".targetDiv" style="display:none">div2</div> 
<div class=".targetDiv" style="display:none">div3</div> 

與‘導航’看起來是這樣的這

<a href="#" class=".nav" target="1">link1</a> 
<a href="#" class=".nav" target="2">link2</a> 
<a href="#" class=".nav" target="3">link3</a> 

這不是我的代碼，我是從這裏：http://forum.jquery.com/topic/slidetoggle-multiple-divs-31-5-2013

它完全按照它的設計工作，我對此沒有任何抱怨。當你點擊一個鏈接時，相應的div會切換，但當你再次點擊同一個div時，它會再次切換並向上滑動（這就是代碼的寫法）。我想阻止這種情況的發生，而且由於我是Javascript和Jquery的新手，我無法弄清楚如何去做。我的非程序員頭腦假設應該有某種if else子句，你會說：

如果.targetDiv是：visible，那麼不要切換newTarget。但是，當我試圖這樣做時，它不起作用。

if($(".targetDiv").is(":hidden")) {  jQuery(function() { 
jQuery('.nav').click(function() { 
    var index = $(this).index(), 
     newTarget = jQuery('.targetDiv').eq(index); 
    jQuery('.targetDiv').not(newTarget).slideUp('fast') 
    newTarget.delay('fast').slideToggle('fast') 
    return false; 
    }) 
});} 

else {alert("already open")} 

我不知道我應該怎麼回事處理這個問題，但它必須是可能的，我可能只是在想如何實現我想要的完全錯誤的方式。我對javascript的理解很少，但我並不是要求某人爲我寫這篇文章，我寧願讓別人告訴我，我做的這是不正確的，然後解釋我應該嘗試做什麼。然後我可以使用谷歌搜索的方式來實現這一目標。

再次感謝您花時間閱讀本文，並希望我已經詳細解答了一些答案。

Answer 1

你只需要包裝兩種「滑」線路中的if語句，就像這樣：

if (!newTarget.is(':visible')) 
{ 
    jQuery('.targetDiv').not(newTarget).slideUp('fast'); 
    newTarget.delay('fast').slideToggle('fast'); 
} 

您可能還需要修復與HTML，例如一些問題從你的班級名稱中抽出時間。在查詢DOM元素時，「。」意思是「找到一個叫做_ [無論在點後面的東西]」。不要在課堂上放點。

您可能還想要拿出<a>標籤的href屬性。他們沒有必要。

Here是一個可用的JSFiddle。乾杯!