jQuery slideToggle多個div

我想要做的是有四個鏈接，每個單擊時都會顯示並隱藏某個div。我正在使用slideToggle，並且能夠使它與真正草率和重複的代碼一起工作。我的一個朋友給了我一個他使用的腳本，我試了一下，最終得到了一些可能發生的事情。但是，它所做的只是隱藏div而不會重新顯示。它也隱藏了所有的div，而不僅僅是特定的div。這是我做的一個jsfiddle。希望你們能理解我想要做的和幫助的事情！非常感謝。jQuery slideToggle多個div

這是我正在使用的腳本。

$(document).ready(function() { 
$(".click_me").on('click', function() { 
    var $faq = $(this).next(".hide_div"); 
    $faq.slideToggle(); 
    $(".hide_div").not($faq).slideUp(); 
}); 
});

http://jsfiddle.net/uo15brz1/

來源

2014-12-11 Nick

下面是小提琴的鏈接。 http://jsfiddle.net/uo15brz1/7/

我改變了你的標記，爲你的div添加id屬性。 jquery，從被點擊的鏈接獲取名稱屬性，在前面添加一個＃，隱藏可見的div，然後切換相應的div。我還添加了e.preventDefault，以阻止瀏覽器因哈希更改而導航。順便說一句，JavaScript不需要$前綴。

$(document).ready(function() { 
    $(".click_me").on('click', function (e) { 
     e.preventDefault(); 
     var name = $(this).attr('name'); 
     var target = $("#" + name); 
     if(target.is(':visible')){ 
      return false; //ignore the click if div is visible 
     } 
     target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo 
     $('.hide_div').slideUp(); //hide all divs on link click 
     target.slideDown(); // show the clicked one 
    }); 
});

來源

2014-12-11 01:29:14 quid

非常感謝，它幾乎工作如何我的意圖。我想要實現的是一次只能顯示一個div。例如，我希望關於我顯示的是負載狀態，其他3個隱藏狀態。如果我點擊了項目，我希望所有其他div都隱藏起來，而那個幻燈片放到視圖中。你明白我想說什麼嗎？ – Nick 2014-12-11 01:36:49

爲什麼js變量不能以$開頭？這是一個非常有用的約定，用於指示引用指向一個jQuery對象。它使代碼更具可讀性。 – Ben 2014-12-11 01:38:51

@Nick，我編輯了我的回覆，所以一次只能看到一個div。 – quid 2014-12-11 01:49:50

歡迎來到Stack Overflow！

這裏有一個小提琴：

http://jsfiddle.net/uo15brz1/2/

基本上，你需要一種方法來指向基於廣告點擊該鏈接上的相關內容<div>。用你目前的標記以一種可靠的方式做到這一點很困難，所以我編輯了它。 jquery文檔中的例子非常好。花一些時間研究它們，它們是開始的好方法。

來源

2014-12-11 01:37:44 Ben

jQuery slideToggle多個div

回答

相關問題