JQuery slideToggle函數問題/如何

我試圖用JQuery和slideToggle（）來滑動隱藏的行，當它點擊一個特定的標題。我試圖用1個jQuery語句來做到這一點。我知道我可以爲每個div標籤創建一個id，併爲單擊的每個「標題行」分別設置一個函數，但我真的不想這樣做。JQuery slideToggle函數問題/如何

在下面的代碼示例中，我只能得到第一行做slideToggle，但我無法弄清楚當點擊'標題行'時如何讓其他人滑動。

任何幫助將不勝感激。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(this).click(function(){ 
    $("#Content").slideToggle("slow"); /* Using this only toggles the first set of data */ 

    }); 
}); 
</script> 
</head> 
<body> 
<div> 
    <!-- Row 1 --> 
    <div id="Label"> 
     1st Header: 
    </div> 
    <div id="Content"> 
     Data 1 
     <br /> 
     Data 2 
    </div> 

    <!-- Row 2 --> 
    <div id="Label"> 
     2nd Header 
    </div> 
    <div id="Content"> 
     Data 3 
     <br /> 
     Data 4 
    </div> 
</div> 
</body> 
</html>

來源

2015-09-25 Michael D

複製'＃Label'，'＃'Content'在id's' html'？元素的'id'應該在'DOM'中是唯一的 – guest271314

你有很多具有相同id的元素，選擇器將只選擇第一個catched的元素，所以你應該使用Class，看看我的回答 – Diptox

Demo

<div> 
    <!-- Row 1 --> 
    <div class="Label"> 
     1st Header: 
    </div> 
    <div class="Content"> 
     Data 1 
     <br /> 
     Data 2 
    </div> 

    <!-- Row 2 --> 
    <div class="Label"> 
     2nd Header 
    </div> 
    <div class="Content"> 
     Data 3 
     <br /> 
     Data 4 
    </div> 
</div>

的Javascript

$(document).ready(function() 
{ 
    $(".Label").click(function() 
    { 
     $(this).next().stop().slideToggle("slow"); 
    }); 
});

來源

2015-09-25 20:48:43 Diptox

這很好用。謝謝。 –

不客氣：D – Diptox

你要完成什麼是非常簡單，有許多方法來完成它。下面是一個簡單的方法，依賴於頭像和內容的順序，就像上面的順序一樣，但首先不要創建重複的ID。你希望所有的id都是唯一的，因爲多種原因。

你想要做的是改變它，所以標題有一個類和內容有另一個類。 https://jsfiddle.net/n1e7w5fL/1/

這是HTML

<div> 
<!-- Row 1 --> 
<div class="clickHeader"> 
    1st Header: 
</div> 
<div class="clickTarget"> 
    Data 1 
    <br /> 
    Data 2 
</div> 

<!-- Row 2 --> 
<div class="clickHeader"> 
    2nd Header 
</div> 
<div class="clickTarget"> 
    Data 3 
    <br /> 
    Data 4 
</div>

這是jQuery的切換他們

$(document).ready(function(){ 
    $(".clickHeader").on("click", function(){ 
     $(this).next(".clickTarget").slideToggle("slow"); 
    }); 
});

來源

2015-09-25 20:58:25 Tom

感謝您鏈接到JSFiddle.net。這將最終變得非常方便！並感謝您的代碼示例。 –

邁克爾當然可以......你標記爲正確的答案也是完全有效的。 – Tom

JQuery slideToggle函數問題/如何

回答

相關問題