檢查切換狀態？

我有以下代碼：檢查切換狀態？

<!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中刪除切換狀態爲隱藏的文本？

來源

2012-06-22 oshirowanen

爲什麼你需要時，它是隱藏刪除的文字嗎？ –

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

來源

2012-06-22 09:02:18

由於某種原因，這似乎啓用了動畫。我該如何擺脫？ – oshirowanen

嗨@oshirowanen嗯動畫？ '：''或者你可以使用'.stop'或者如果你在jsfiddle中彈出完整的代碼，我可以爲你做一個完整的工作演示，歡呼 –

原文是我擁有的所有代碼。即使在最初的jsfiddle examaple中，如果我使用原始示例，切換也是即時的，就像它出現並消失一樣。但是，只要我在切換中添加一個函數，它就會最終完成一個平滑的緩動型動畫。 – oshirowanen

Working demo

這裏只是填寫一些東西，而你是隱藏在div

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

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

來源

2012-06-22 09:03:43

檢查切換狀態？

回答

相關問題