私はAJAXWordpressテーマを使用していますが、問題はテーマ内ではなく、私の知る限り、追加したコードにあります。
特別なドロップダウンボックスに「Contact-Form-7」を使用しています。送信用の簡単なアクセスフォームを作成するために使用しています。
私は以前にこれらのコード行を使用しましたが、ボタンがクリックされたときにボックスが表示されないという問題があります。以下は2つのリンクと私が使用したソースコードです。リンク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 */
上記のコードでは、ボタンが押されたときに「セクション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-->
私が抱えているこの唯一の問題は、これにまさにそのアクションを実行させることです。私は何が欠けているのか迷っています。どんな助けでもいただければ幸いです。