0

ドロップダウンメニューでコンタクトフォームを使用しようとしました。これまでのところ、メニューで使用することはできますが、この連絡フォームには何も書き込めません。

メニューは毎回閉じます。で試してみましたdisplay:blockが、うまくいきません。この問題を解決するにはどうすればよいですか。ソリューション？

ここに私のコードの例外があります:

          <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="index.html">Kontakt <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class="nav-header">Kontaktiere mich</li>
                    <li class="contactform">
                        <section>
                            <form method="post" action="/" class="contactbox">
                                <div class="contactbox">
                                    <p><label>Dein Anliegen:</label><br>
                                    <textarea class="input-xsmall" id="textarea" rows="3"></textarea>

                                    <p><label>Dein Name:</label><br>
                                    <input type="text" required=""></p>

                                    <p><label>Deine E-Mail-Adresse:</label><br>
                                    <input type="email" required="" value=""></p>

                                    <button class="btn" type="submit">absenden</button>
                                </div>
                            </form>
                        </section>
                    </li>
                </ul>
          </li>
4

1 に答える 1

1

クリックして下部を開くリンクに少し変更を加える必要があります。

<a data-toggle="dropdown" tabindex="1" class="dropdown-toggle" href="#">
    Kontakt <b class="caret"></b>
</a>

そしてこれをCSSに入れます：

.dropdown-menu {display: none;}

.dropdown-toggle:active + .dropdown-menu, 
.dropdown-toggle:focus + .dropdown-menu, 
.dropdown-menu:hover {display: block;}

.dropdown-toggle:focus {outline:none;}

注：Kontaktをクリックすると、ドロップダウンが開きます。ホバーでも開くようにしたい場合は、

.dropdown-toggle:hover + .dropdown-menu, 
.dropdown-toggle:active + .dropdown-menu,
.dropdown-toggle:focus + .dropdown-menu, 
.dropdown-menu:hover {display: block;}

コメントに記載されているように、この方法には問題があります。ドロップダウンの内側をクリックしてから、カーソルをドロップダウンの外側に移動すると、閉じます。これは修正できませんが、あります...

...別の方法：リンクの代わりにラベル付きのチェックボックスを使用する

<input data-toggle="dropdown" type='checkbox' name='dropdown-toggle' id='dropdown-toggle' class='dropdown-toggle'/>
<label for='dropdown-toggle'>Kontakt <b class="caret"></b></label>

この場合、CSSは次のようになります。

.dropdown-toggle, .dropdown-menu {display: none;}
.dropdown-toggle:checked ~ .dropdown-menu, .dropdown-menu:hover {display: block;}
.dropdown-toggle:focus {outline:none;}

デモhttp://dabblet.com/gist/2794382

于 2012-05-26T16:12:42.840 に答える