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”类的span和带有“tags”类的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
        });
    });
});

将jQuery .click（）函数与单个元素一起使用

3 个答案: