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在下拉菜單中

回答

相關問題