2011-02-09 9 views
0

私はこのためにいくつかの欠点があると思います。 JavaScriptやJQueryの新機能ですが、誰かが前に助けようとしましたが、その解決策はどちらかといえません。JavaScriptまたはJQueryの問題部がトグルしない

私は、ソートのドロップこのサイト上にあるものと同様のナビゲーションダウン効果を必要とする: professional-painters.com [連絡先がトグルイマイチいくつかの理由について「クイックコンタクト」

をクリックします。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DaVincisApp1.WebForm2" %> 

<!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 runat="server"> 
<title></title> 
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> 
<%--<script type="text/javascript" src="Scripts/motion.js"></script>--%> 
<script type="text/javascript"> 
    $(document).ready(function(){  /* make sure the contact form is hidden when the page loads: */  $('div#contact-form').hide();  $('a#contact-button').toggle(function(){   /* slides the contact form down and shows it */   $('div#contact-form').slideDown();  }, function() {   /* hides it again */   $('div#contact-form').slideUp();  } } 
);</script> 
</head> 
<body> 
<div id="nav"> 
    <div id="navigation-primary"> 
     <ul> 
      <li><a href="#">Menu 1</a></li> 
      <li><a href="#">item 2</a></li> 
      <li><a href="#">Menuitem 3</a></li> 
      <li><a id="contact-button" href="#">Contact</a></li> 
     </ul> 
     <div id="contact-form"> 
      <form action="#" method="post"> 
      <div class='hiddenFields'> 
       <input type="hidden" name="ACT" value="20" /> 
       <input type="hidden" name="URI" value="index" /> 
       <input type="hidden" name="XID" value="1c46d517779f90c9f5a13bac8338968a3c2b9d16" /> 
       <input type="hidden" name="status" value="open" /> 
       <input type="hidden" name="return" value="consultation/thank_you" /> 
       <input type="hidden" name="redirect_on_duplicate" value="" /> 
       <input type="hidden" name="RET" value="http://professional-painters.com/" /> 
       <input type="hidden" name="form_name" value="Quick" /> 
       <input type="hidden" name="id" value="freeform" /> 
       <input type="hidden" name="params_id" value="136390" /> 
       <input type="hidden" name="site_id" value="1" /> 
      </div> 
      <fieldset style="padding: 7px;"> 
       <table id="quickcontact-in"> 
        <tr> 
         <td> 
          <input tabindex="1" class="field" type="text" name="name" value="Name" onfocus="if (this.value == 'Name') this.value = '';" 
           onblur="if (this.value == '') this.value = 'Name';" /> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input tabindex="2" class="field" type="text" name="email" value="Email address" 
           onfocus="if (this.value == 'Email address') this.value = '';" onblur="if (this.value == '') this.value = 'Email address';" /> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input tabindex="3" class="field" type="text" name="phone1" value="Phone (optional)" 
           onfocus="if (this.value == 'Phone (optional)') this.value = '';" onblur="if (this.value == '') this.value = 'Phone';" /> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <textarea tabindex="4" class="txtField" cols="4" rows="4" name="comments">Questions or Comments</textarea> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <div id="submit"> 
           <input tabindex="6" type="submit" name="submit" value="Send Request" /> 
          </div> 
          <p class="tiny" align="right"> 
           <a href="javascript:;" onmousedown="toggleSlide('quickcontact');">Close</a></p> 
         </td> 
        </tr> 
       </table> 
      </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 
</body> 
</html> 

#navigation-primary { 
/*background: url("/img/nav_back.gif") repeat-x scroll 0 0 #61533F;*/ 
background-color: Red; 
left: 0; 
position: absolute; 
top: 46px; 
z-index: 1; 
} 

#nav { 
height: 34px; 
width: 878px; 
} 

#contact-button a { 
/*background: url("/img/nav_contact.gif") no-repeat scroll 0 0 transparent;*/ 
background-color: Green; 
width: 109px; 
} 

#quickcontact { 
background: none repeat scroll 0 0 #666449; 
border-left: 2px solid #3D352B; 
color: #FFFFFF; 
padding: 10px; 
position: absolute; 
right: 0; 
text-align: left; 
top: 75px; 
width: 245px; 
z-index: 1000; 
} 

#quickcontact-in a { 
color: #FFFFFF; 
} 

#quickcontact fieldset { 
border: medium none; 
} 

#quickcontact-in .field { 
background: none repeat scroll 0 0 #FEFBD5; 
border: 2px solid #FFF1BD; 
color: #666666; 
padding: 2px; 
width: 190px; 
} 

#quickcontact-in .txtField { 
background: none repeat scroll 0 0 #FEFBD5; 
border: 2px solid #FFF1BD; 
color: #666666; 
display: block; 
float: left; 
font: 1em "Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif; 
height: 90px; 
margin: 5px 0 7px; 
outline: medium none; 
padding: 2px; 
width: 190px; 
} 
+0

あなたが取得した特定のエラーは何ですか?それはmotion.jsファイルに関連していますか?もしそうなら、関連する部分も投稿するべきです。 – Prescott

+0

オンクリーではなくonmousedownを試してください。それとも重要ではないですか? –

+0

さて、私はArnohsの助けを借りてHTMLの一部を変更しましたが、このdoenstトグルは全くありません。しかし、少なくともJavaScriptエラーはありません。 – Paul

答えて

2

クイックマッシュアップの例here。私はあなたがslideToggle()を使用できると思います。より多くの例についてはhereをご覧ください。フッターにこれを追加すること

+0

javascriptで要素を隠していても、ページをオーバーレイするフォームが必要な場合は、うまく機能しないかもしれません。 – daveyfaherty

+0

Yes.RestはCSSの驚異です.. http://jsfiddle.net/cMZ3E/4/同じサンプルの更新版をご覧になる – Chin

+0

それは間違いなく素晴らしい解決策です! @Chin JQuery Contact Modalに関する私の他の投稿を見るのに二番目の時間がありますか? – Paul

0

試してみてください。。

$( '#コンタクトボタンA')をクリックします(関数(){ $( '#コンタクトフォーム')slideToggle( "速いです"); });
+0

@Chinは正しいです。 – daveyfaherty

関連する問題