Question

我正在使用AJAX Wordpress主题，但根据我的知识，问题不在主题范围内，而是我添加的代码。

我正在使用“Contact-Form-7”作为特殊的下拉框。我正在使用它创建一个易于访问的表单以供提交。

之前我使用过这些代码行，但是我遇到的问题是单击按钮时框不会出现。以下是两个链接＆amp;我使用的源代码。链接1是我正在添加此表单的Ajax站点。链接2与我们完成的形式相同，但它的工作正常。按钮位于顶部，读取“请求预约”。

链接1：http://www.geigerandwood.com

Link2：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-->

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

Answer 1

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

联系表单与CSS下拉 - 无响应

1 个答案: