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

这行得通，但效果很差。

首先，对于打开：幻灯片从底部向上打开（而不是向上打开）

第二，关闭：幻灯片动画不起作用！

Answer 1

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

（你在 css 显示行中也打错字了）

工作小提琴：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>