检查切换状态？答案

【问题标题】：Checking toggle state?检查切换状态？
【发布时间】：2012-06-22 08:58:42
【问题描述】：

我有以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title></title> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <script type="text/javascript" language="javascript"> 
            $(document).ready(function() {
                $("#widget_list").hide();

                $("#click_me").click(function() {
                    $(this).parents( "#clipboard" ).find( "#widget_list" ).toggle();
                });
            });
        </script>
    </head> 
    <body> 
       <div id="clipboard">

           <div href="#" id="click_me" style="border:solid 1px black;text-align:center;cursor:pointer;">
                \/
           </div>

           <div id="widget_list" style="border:solid 1px black;text-align:center;">
                some stuff here
           </div>

       </div>

       some other stuff here

    </body> 
</html>

jsFiddle demo.

而不是将文本some stuff here 硬编码为#widget_list。我如何将该文本添加到#widget_list，当它的切换状态可见时，我如何从#widget_list 中删除该文本，当它的切换状态隐藏时？

【问题讨论】：

为什么文本隐藏时需要删除？

标签： jquery-ui jquery-selectors jquery

【解决方案1】：

演示 http://jsfiddle.net/QFTsb/1/ 或 http://jsfiddle.net/QFTsb/3/

使用.is(":visible") : http://api.jquery.com/visible-selector/

你可以看到你会在演示中收到警报，当它可见时或现在在切换中

这会有所帮助

代码

$("#widget_list").hide();

$("#click_me").click(function() {
    $(this).parents("#clipboard").find("#widget_list").toggle(function() { alert($(this).is(':visible'));});
});

【讨论】：

这似乎出于某种原因启用了动画。我该如何摆脱它？
嗨@oshirowanen 嗯动画？ :) 或者你可以使用 .stop 或者如果你在 jsfiddle 中给我完整的代码，我可以为你制作一个完整的工作演示，干杯
原帖是我所有的代码。即使在原始的 jsfiddle 示例中，如果我使用原始示例，切换也是即时的，就像它出现和消失一样。但是，一旦我在切换中添加了一个函数，它最终会做一个平滑的缓动类型动画。
例如：此处无动画：jsfiddle.net/QFTsb，此处启用动画：jsfiddle.net/QFTsb/5...
没关系，如果我在切换中添加0，动画就会消失，例如：jsfiddle.net/QFTsb/10。

【解决方案2】：

Working demo

在隐藏 Div 的同时在此处填充一些内容

$("#widget_list").hide(function(){ $(this).html('some stuff here')});

$("#click_me").click(function() {
    $(this).parents( "#clipboard" ).find( "#widget_list" ).toggle();
});

【讨论】：