Question

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

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

Answer 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

下拉菜单中的联系表格

1 个答案: