Jquery slideToggle 效果不流畅且工作错误

Question

<style>
   .hideblock{
       dispaly:none;
    }
</style>

<span id="btm">click here</span>

<ul>
    <li id="showid" class="hideblock">
        <span>target text</span>
    </li>
</ul>

<script>
    $("#btm").click(function(){
        $("#showid").toggleClass("hideblock");
    });
</script>

代码有效。现在我想用 jquery 幻灯片关闭和打开它。

我试试这个：

$("#showid").slideToggle().toggleClass("hideblock");

这很管用，但效果很差。

首先，对于打开：幻灯片打开buttom to up (not up to buttom)

二、关闭：幻灯片动画不工作！

Answer 1

您触发的次数超出了您的需要。仅触发 slideToggle()，不用担心 class 切换。

（您在 css 显示行中也输入错误）

工作fiddle：http://jsfiddle.net/q1v15txo/

<style>
   .hideblock{
       display:none;
    }
</style>

<span id="btm">click here</span>

<ul>
    <li id="showid" class="hideblock">
        <span>target text</span>
    </li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
    $("#btm").click(function(){
        $("#showid").slideToggle();
    });
});
</script>

Jquery slideToggle 效果不流畅且工作错误

Jquery slideToggle effect not smooth and works wrong

javascript

jquery

slide

slidetoggle