2012-06-19 29 views
1

我正在使用AJAX Wordpress主題,但問題不在主題內,據我所知,但與我已添加的代碼。與CSS下拉式聯繫表格 - 無反應

我使用「Contact-Form-7」作爲特殊的下拉框。我使用它來創建一個易於訪問的表單提交。

我以前使用過這些代碼行,但是我遇到的問題是當按鈕被點擊時該框不會顯示。以下是兩條鏈接&我使用的源代碼。鏈接1是我添加此表單的Ajax網站。鏈接2與我們所做的形式相同,但工作得很好。該按鈕位於頂部,它讀取的是「請求約會」。

鏈接1:http://www.geigerandwood.com

鏈路2:http://www.tobiasdental.com

在報頭的代碼行:

<!-- BEGIN: FREE Estimates Form --> 
    <div class="center-wrap"> 
     <section id="drop-down-content"> 
      <h1>Request an Appointment</h1> 
      <?php echo do_shortcode('[contact-form-7 id="173" title="Drop Down"]'); ?> 
     </section> 
     <section id="drop-down"> 
      <a id="drop-down-toggle">Request an Appointment</a> 
     </section>     
    </div> 
<!-- END: FREE Estimates Form --> 

在CSS代碼行:

/* Free Estimates Drop Down Box */ 
    body #drop-down { 
    transition: top 0.5s; 
    -moz-transition: top 0.5s; 
    -webkit-transition: top 0.5s; 
    -o-transition: top 0.5s; 
    width: 700px; 
    background-color: #333333; 
    position: absolute; 
    top: -30px; 
    left: 0; 
    z-index: 10000; 
    padding: 20px 0 10px 0; } 

    body #drop-down-content:after{ 
     content: ""; 
     position: absolute; 
     top: -7px; 
     left: 133px; 
     width: 15px; 
     height: 7px; 
     background: url("images/dark-arrow-up.png") no-repeat 0 0; 
    } 
    body #drop-down form { 
     zoom: 1; 
     clear: both; } 
     body #drop-down form:before, body #drop-down form:after { 
     content: ""; 
     display: block; } 
     body #drop-down form:after { 
     clear: both; } 
    body #drop-down div { 
     width: 250px; 
     float: left; 
     margin-right: 25px; } 
    body #drop-down div input{ 
     width: 250px; 
    } 
    body #drop-down label { 
     display: block; 
     color: #eeeeee; 
     margin-bottom: 10px; 
     font-style: italic; 
     text-transform: uppercase; 
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); } 
    body #drop-down textarea { 
     height: 85px; 
     float: left; 
     margin-right: 25px; } 
    body #drop-down button { 
     float: left; 
     margin-left: 0; 
     font-size: 18px; 
     padding: 8px; 
     margin-top: 45px; } 
    body #drop-down.open { 
     top: 0; } 
    body #drop-down-toggle { 
    display: block; 
    text-indent: -9000px; 
    overflow: hidden; 
    background: url("images/topper_btn.png") no-repeat 0 0; 
    width: 243px; 
    height: 45px; 
    cursor: pointer; 
    position: absolute; 
    bottom: -44px; 
    right: 0; } 
    body #drop-down-content{ 
    position: absolute; 
    display: none; 
    left: 440px; 
    top: 50px; 
    background-color: #333333; 
    padding: 18px; 
    border-radius: 5px; 
    z-index: 10000; 
    color: #fff; 
    font-weight: bold; 
    font-size: 14px; 
    } 

    body #drop-down-content input[type="text"]{ 
    color: #521306; 
    font-size: 14px; 
    font-weight: bold; 
    font-family: "Swiss 721", Helvetica; 
    border: 3px solid #c5d0d7; 
    border-radius: 2px; 
    width: 247px; 
    } 
    body #drop-down-content input[type="file"]{ 
    color: #521306; 
    font-size: 14px; 
    font-weight: bold; 
    font-family: "Swiss 721", Helvetica; 
    border: 3px solid #c5d0d7; 
    border-radius: 2px; 
    width: 247px; 
    } 
    body #drop-down-content p{ 
    margin-top: 13px; 
    } 
    body #drop-down-content .wpcf7-submit{ 
    background-color: #521306; 
    color: #fff; 
    float: right; 
    padding: 7px 12px; 
    font-size: 14px; 
    width: auto; 
    border: 0; 
    cursor: pointer;  
    } 
/* Free Estimates Drop Down Box END */ 

在代碼上面,這是要自動添加的以下內容「部門ID =‘下拉內容’」的時候,按下按鈕:

<section id="drop-down-content" style="display: none;"> <!--button is not clicked--> 
<section id="drop-down-content" style="display: block;"> <!--button is clicked--> 

我有這唯一的問題是讓這個來執行非常行動。我失去了我所缺少的東西。任何幫助,將不勝感激。

+0

只是確認,你沒有兩個'

'具有相同的ID,對吧?我想這只是向我們展示了不同之處,但我覺得我應該要求保持安全。 – Fewfre

+0

對,我剛纔展示的最後

爲什麼要通過鼠標點擊從css – dgPehrson

回答

0

在您的牙醫網站上有一個名爲「application-ck.js」的腳本,其中腳本用於顯示「下拉內容」div。但是「geigerandwood.com」頂部表單沒有這種點擊事件。

+0

添加什麼謝謝SVS!我知道這很簡單,只需要一雙額外的眼睛。你是一個很好的幫助!再次感謝! – dgPehrson