联系表格与CSS下拉 - 无响应(Contact Form with CSS Drop Down - Non-Responsive)

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

我正在使用“Contact-Form-7”作为特殊的下拉框。 我正在使用它来创建一个简单的提交表单。

我之前使用过这些代码行，但是我遇到的问题是单击按钮时框不会出现。 以下是我使用的两个链接和源代码。 链接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-->

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

I'm working with an AJAX Wordpress theme but the problem is not within the theme, to my knowledge, but with the codes I've added.

I'm using "Contact-Form-7" for a special drop-down box. I'm using it to create an easy access form for submission.

I've used these lines of code before but the problem that I'm having is the box will not show up when the button is clicked. Below is two links & the source code I used. Link 1 is the Ajax site where I'm adding this form. Link 2 is the same form that we've done but it works just fine. The button is at the top and it read's "request an appointment".

Link 1: http://www.geigerandwood.com

Link2: http://www.tobiasdental.com

Lines of code in the header:

<!-- 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 -->

Lines of code in the 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 */

In the code above, this is the following that is to be added automatically in the "section id='drop-down-content'" when the button is pressed:

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

This only problem I'm having is to get this to perform that very action. I'm lost as to what I am missing. Any help would be appreciated.

最满意答案

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

In your dentist website there is a script named "application-ck.js" in which script is there to show-hide "drop-down-content" div. But there is no such click event for "geigerandwood.com" top form.

联系表格与CSS下拉 - 无响应(Contact Form with CSS Drop Down - Non-Responsive)

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

我正在使用“Contact-Form-7”作为特殊的下拉框。 我正在使用它来创建一个简单的提交表单。

我之前使用过这些代码行，但是我遇到的问题是单击按钮时框不会出现。 以下是我使用的两个链接和源代码。 链接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-->

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

I'm working with an AJAX Wordpress theme but the problem is not within the theme, to my knowledge, but with the codes I've added.

I'm using "Contact-Form-7" for a special drop-down box. I'm using it to create an easy access form for submission.

I've used these lines of code before but the problem that I'm having is the box will not show up when the button is clicked. Below is two links & the source code I used. Link 1 is the Ajax site where I'm adding this form. Link 2 is the same form that we've done but it works just fine. The button is at the top and it read's "request an appointment".

Link 1: http://www.geigerandwood.com

Link2: http://www.tobiasdental.com

Lines of code in the header:

<!-- 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 -->

Lines of code in the 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 */

In the code above, this is the following that is to be added automatically in the "section id='drop-down-content'" when the button is pressed:

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

This only problem I'm having is to get this to perform that very action. I'm lost as to what I am missing. Any help would be appreciated.

最满意答案

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

In your dentist website there is a script named "application-ck.js" in which script is there to show-hide "drop-down-content" div. But there is no such click event for "geigerandwood.com" top form.