jQuery slideDown with forms

次のコードが機能しないのはなぜですか？ Operaの下では、divの位置はちょうど黒い線が表示され、IEの下ではdivが1秒間表示され、FFでは何も起こりません。jQuery slideDown with forms

function showAdvanced(){ 
$("#advanced").slideDown("slow"); 
}; 

<div id="content"> 
    <form action="mycontrolleraddress" method="post" accept-charset="utf-8" name="search_form" id="search_form"> 
    <input type="text" name="query" value="" style="width:300px;font-size:18pt;border-color:#0080FF;border-width:2px;border-style:solid;background-color:#F2F2F2;" /> 
    <a href="" onclick="showAdvanced();" style="font-size:8pt;font-color:blue;">Advanced options</a> 
    <br/> 
    <div id="advanced" style="position:relative;height:400px;">From: 
    <input type="text" name="date_from" value="" id="datepicker" onchange="validateDate();" class="datefield" /> To: 
    <input type="text" name="date_to" value="" id="datepicker2" onchange="validateDate();" class="datefield" /> 
    <input type="text" name="limit" value="Results limit" /> 
    </div> 
    <input type="submit" name="submit" value="Szukaj" />   
</div>

これは、基本的には、検索クエリのテキストボックスだ、と私は、高度なオプション（二つのデータピッカーとテキストボックス）がリンクをクリックした後、表示したいです。

出典

2011-06-29 gh0st

<script>タグ内のスクリプトは、<head>にありますか？次のように表示されていることを確認してください：http://jsfiddle.net/bJQVa/。デフォルトでは、＃advancedが非表示に設定されています。

注：hrefには＃を追加し、関数にはfalseを返します。

出典

2011-06-29 20:28:49 glortho

はい、それはにあり、jQueryのdatapickersは正常に動作します。私も$（ "＃advanced"）を持っています。hide（）;ドキュメントロード時。 – gh0st

jsFiddleはFFであなたのために働くのですか？ 4.0.1で私のために働く、そしてIE 8でも。 – glortho

注：私はまた、hrefのために＃を追加し、関数の中でfalseを返します。 – glortho

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

     console.log('script loaded'); 

     function showAdvanced() { 
      console.log('showAdvanced() executed'); 
      $("#advanced").slideDown("slow"); 
     }; 

     $(document).ready(function(){ 
      console.log('document is ready'); 
     }); 

    </script> 
</head> 
<body> 

<div id="content"> 
<form action="mycontrolleraddress" method="post" accept-charset="utf-8" name="search_form" id="search_form"> 

<input type="text" name="query" value=""/><br/> 

<a href="#" onclick="showAdvanced();" style="font-size:8pt;font-color:blue;">Advanced options</a><br/> 

<div id="advanced" style="display: none;"> 
    From: <input type="text" name="date_from" value="" id="datepicker" onchange="validateDate();" class="datefield" /><br/> 
    To: <input type="text" name="date_to" value="" id="datepicker2" onchange="validateDate();" class="datefield" /> <br/> 
    <input type="text" name="limit" value="Results limit" /> 
</div> 
<input type="submit" name="submit" value="Szukaj" /> 

</div> 

</body> 
</html>

私のために働いてください。次回は、より良いコードをフォーマットしようとすると、読みやすくなります。

出典

2011-06-29 20:56:27 Darrarski

はFF5でテストされ、他のブラウザでも動作するはずです – Darrarski

jQuery slideDown with forms

答えて

関連する問題