2011-02-09 61 views
0

我認爲我缺少一些這件事。我對JavaScript和JQuery有點新鮮,有人曾經試圖提供幫助,但他們的解決方案也無法工作。JavaScript或JQuery問題Div不切換

我需要,什麼是在這個網站類似於一個排序的下拉導航效果: 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 2011-02-09 15:30:48

+0

嘗試onclick而不是onmousedown,或者它是否失去重要? – 2011-02-09 15:51:26

+0

那麼我在Arnohs的幫助下更改了一些HTML,但是這完全可以切換。但至少沒有JavaScript錯誤。 – Paul 2011-02-09 16:04:57

回答

2

快速混搭示例here。我認爲你可以使用slideToggle()。有關更多示例,請參閱here

0

嘗試添加該頁腳:。

$( '#接觸按鈕')點擊(函數(){ $( '#聯繫形式')的slideToggle( 「快」); });