javascript - 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 Slide 关闭并打开它。

我试试这个:

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

这有效，但非常糟糕。

首先，对于打开:幻灯片从按钮向上打开(而不是向上打开到按钮)

第二，关闭:幻灯片动画不起作用!

Answer 1

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

(你在 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>