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

.slideToggle on .click function not working

本文关键字:不起作用 功能 click slideToggle-on      更新时间:2023-11-08

我正在构建一个汤博乐网站,我希望当用户点击标签span时,它应该显示标签。直到今天,它一直正常工作,现在当你点击它时,它会立即回来。我搞不清楚出了什么问题。

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

尝试使用.thoggle(),我相信通过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");
});