contactform在下拉菜单中

我试图在dropdownmenu中使用contactform。到目前为止，我可以在菜单中使用它，但我无法在此联系表中写入任何内容。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>

来源

2012-05-26 hazelnut

我不能肯定，这完全可以用CSS来实现。它与[我帮助解决这个问题]有一些相似之处（http://stackoverflow.com/questions/10044403/show-div-while-input-is-selected-using-css-without-javascipt/10044553#10044553），但有一些其他复杂因素。我们也需要看到你的css代码，并且最好为你设置一个[jsfiddle.net]（http://jsfiddle.net/）测试用例来玩解决方案。 – ScottS

只能使用CSS来完成。一种方法是在我的答案。也有选择使用复选框或单选按钮而不是链接，：选中的伪类和兄弟选择器:) – Ana

您需要稍作改动，以在其上单击打开底部的链接：

<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;}

注意：下拉柯点击打开时ntakt。如果你希望它和悬停打开，你需要有

.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-26 16:12:42 Ana

谢谢！ :-)还有一个小问题：当我点击一个标签，然后用curosr向外走时，菜单仍然关闭。 – hazelnut

这接近解决方案（和我所想的一致）。我遇到了一个错误（在Firefox中，不知道其他人）。如果您点击“输入”字段，然后将鼠标移动到“Kontakt”左侧（不点击，只是移动），它会消失。 – ScottS

这不是一个错误，这是正常的。只要Kontakt按钮具有焦点或鼠标光标，下拉列表就会显示：block。解决这个问题的唯一方法就是不要使用链接 - 我也会做一个演示。 – Ana

contactform在下拉菜单中

回答

相关问题