Question

我有以下代码：

<!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删除该文本？

Answer 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'));});
});

Answer 2

Working demo

在隐藏Div

时，只需填充一些内容

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

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

检查切换状态？

2 个答案: