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 回答