html - 带有 CSS 下拉菜单的联系表单 - 无响应

Question

我正在使用 AJAX Wordpress 主题，但据我所知，问题不在主题中，而是在我添加的代码中。

我正在使用“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 */

在上面的代码中，这是按下按钮时将自动添加到“section id='drop-down-content'”中的以下内容:

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

我遇到的唯一问题是让它执行那个 Action 。我迷失了我所缺少的东西。任何帮助将不胜感激。

Answer 1

在您的牙医网站上有一个名为“application-ck.js”的脚本，该脚本用于显示-隐藏“下拉内容”div。但是“geigerandwood.com”顶部表单没有这样的点击事件。