使用具有單個元素的jQuery .click（）函數

Question

我只想在用戶單擊標籤按鈕時在Tumblr博客上顯示標籤列表。爲此我使用這個HTML和jQuery。

HTML

<span class="tags-link">Tags</span> 
    <ul class="tags"> 
    <li> <a href="{TagURL}">{Tag}</a> </li> 
    </ul> 

jQuery的

$(document).ready(function(){ 
    $(".tags-link").click(function() { 
     $(".tags").slideDown(700, function(){ 
      //end animation 
     }); 
    }); 
}); 

我每次點擊.tags-link每.tags顯示在頁面上，我只希望該職位的那些，其中用戶點擊了顯示。我最近開始學習jQuery和我有點丟在這裏......

Answer 1

您可以使用.next()http://api.jquery.com/next/

$(this).next(".tags").slideDown(700, function(){ 

Answer 2

您需要爲目標的tags，這只是下一個相鄰的元素：

$(document).ready(function(){ 
    $(".tags-link").click(function() { 
     $(this).next(".tags").slideDown(700, function(){ 
      //end animation 
     }); 
    }); 
}); 

Answer 3

您可以在類別爲「tags-link」的範圍和類爲「標籤」的ul上設置數據屬性。然後，當您點擊「.tags-link」元素時，它將顯示具有相同數據屬性的「.tags」元素。

例如：

HTML

<span class="tags-link" data-id="1">Tags</span> 
<ul class="tags" data-id="1"> 
    <li> <a href="{TagURL}">{Tag}</a> </li> 
</ul> 

jQuery的

$(document).ready(function(){ 
    $(".tags-link").click(function() { 
     var id = $(this).attr('data-id'); 
     $(".tags[data-id='" + id + "']").slideDown(700, function(){ 
      //end animation 
     }); 
    }); 
});