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>
答
您需要稍作改动,以在其上单击打开底部的链接:
<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;}
我不能肯定,这完全可以用CSS来实现。它与[我帮助解决这个问题]有一些相似之处(http://*.com/questions/10044403/show-div-while-input-is-selected-using-css-without-javascipt/10044553#10044553),但有一些其他复杂因素。我们也需要看到你的css代码,并且最好为你设置一个[jsfiddle.net](http://jsfiddle.net/)测试用例来玩解决方案。 – ScottS
只能使用CSS来完成。一种方法是在我的答案。也有选择使用复选框或单选按钮而不是链接,:选中的伪类和兄弟选择器:) – Ana