javascript - .slideToggle on .click 功能不起作用

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");

});