下拉菜单中的联系表答案

【问题标题】：contactform in a dropdownmenu下拉菜单中的联系表
【发布时间】：2012-06-01 19:29:03
【问题描述】：

我尝试在下拉菜单中使用联系表。到目前为止，我可以在菜单中使用它，但我不能在这个联系表中写任何东西。

菜单每次都会关闭。我已经用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>

【问题讨论】：

我不确定这可以完全用 css 完成。它与this issue I helped solve 有一些相似之处，但还有一些其他复杂的因素。我们还需要查看您的 css 代码，理想情况下，您可以设置一个 jsfiddle.net 测试用例来使用解决方案。
仅使用 CSS 即可完成。我的回答中有一种方法。还可以选择使用复选框或单选按钮而不是链接，:checked 伪类和兄弟选择器:)

标签： css drop-down-menu contact-form

【解决方案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;}

如 cmets 中所述，此方法有一个问题：在下拉列表内单击然后将光标移到下拉列表之外......它会关闭。这无法修复，但有...

...另一种方法：使用带有标签而不是链接的复选框

<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

【讨论】：

谢谢！ :-) 还有一个小问题：当我点击一个标签然后带着光标走到外面时，菜单仍然关闭。
这接近于一个解决方案（并且与我的想法一致）。我遇到了一个错误（在 Firefox 中，不知道其他错误）。如果您单击 input 字段，然后将鼠标向左移动经过“Kontakt”（没有单击，只是移动），它就会消失。
不是bug，是正常的。只要 Kontakt 按钮具有焦点或鼠标光标，下拉菜单就会显示：阻止。解决这个问题的唯一方法是不使用链接 - 我也会对此进行演示。