下拉菜單/搜索欄引導程序

只是兩個小問題，在學校任務上使用引導程序重新創建通用網站。下拉菜單/搜索欄引導程序

A）當屏幕是< 820px並且在下拉列表中包含另一個名爲「search」的下拉列表中的輸入字段時，我一直在水平導航欄中隱藏搜索輸入字段/提交按鈕。

但我試圖隱藏這個搜索下拉列表，直到屏幕爲< 820px，並將該列表定位到一個類中，然後它仍然顯示爲display: none。無論如何你可以做到這一點？

<li class="dropdown searchDropDown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Search<span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
      <li> 
       <input type="text" class="form-control searchBox" placeholder="Search"> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </li> 
     </ul> 
</li>

我.searchDropDown {display:none}並有最大寬度820px display: block 媒體查詢但問題是，它不是在全頁面大小隱藏這個列表類。 B）當我點擊搜索下拉菜單並嘗試點擊搜索輸入字段，但它失去了焦點並回滾。

來源

2015-06-03 joshuaaron

確定您的顯示：無屬性是在顯示下定義的：block one？ – brance

當問一個關於css的問題時，最好顯示你正在使用的css。您可以使用[JSFiddle with bootstrap]（http://jsfiddle.net/brainbolt/52VtD/4/）並將您的css和html分享給我們。 – George

可以使用一些更多的信息來找出爲什麼display：none不工作。可能是其他css覆蓋它，可能是你的CSS定位錯誤。不能確定 –

B）的點擊被傳播到具有連接到它的點擊事件上面裏，你可以添加這樣的函數（jQuery的）

$('.searchBox').click(function(e){ 
e.stopPropagation(); 
});

如果不工作，確保你實際上是點擊輸入而不是另一個元素。

我會回到A在一分鐘內

來源

2015-06-03 13:50:08

這工作完美，thankyou @VladPintea – joshuaaron

對於質疑使用

@media screen and (min-width: 820px) { 
    .searchDropDown { 
    display: none!important; 
    } 
}

而且，記住關閉img和input標籤

來源

2015-06-03 14:24:44 George

是的，這將做到這一點，如何沒有'！重要'它不工作？謝謝 – joshuaaron

@joshuaaron它正在被覆蓋。你可以使用你的瀏覽器來檢查元素，看看應用了哪些css規則，我使用chrome，因爲我覺得它更容易，但你可以用任何瀏覽器來完成。要訪問此，您通常可以右鍵單擊並選擇檢查元素或按f12 :) – George

謝謝，無法在檢查元素中發現我自己，感到很蠢。雖然讚賞大幫助！ @GeorgeLee – joshuaaron

下拉菜單/搜索欄引導程序

回答

相關問題