Question

我正在建立一个Tumblr网站，我希望当用户点击标签跨度时，它应该显示标签。它一直工作到今天，现在当你点击它时，它会立即回来。我无法弄清楚出了什么问题。

HTML

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

CSS

.tags{
    list-style-type: none;
    padding: 0;
    margin: 24px 0 0 0;
}

.tags-open{
    display: block;
}

.tags li{   
    font-size: 14px;
}

.tags li a{
    color: #9CA8B3;
    margin-right: 12px;
}

.tags-close{
    display: none;
}

的jQuery

$(document).ready(function(){
    $(".tags-link").click(function() {
        $(this).next(".tags").slideToggle(500, function(){
            $(this).toggleClass("tags-open");
            $(".tags li").css("display","inline-block");
            //end animation
        });
    }); // end tags
}); // end ready

Answer 1

尝试使用.toggle（）代替，我相信通过JQuery UI你可以实现幻灯片效果。

$(document).click(function(){
    var tags = $(this).next('.tags');
    tags.toggle('slide', {direction:'up'},500);
    $(this).animate(500).toggleClass("tags-open"); //animate fades class changes
    $("li.tags").animate(500).css("display","inline-block");

});

.slideToggle on .click功能不起作用

1 个答案: