CSS：Display-Bug

Question

我正在用TYPO3（和Bootstrap 3軟件包）編程我公司的新主頁，並且遇到了一個很大的問題。

移動導航存在一個錯誤。它看起來像這樣的HTML：

<li class="dropdown"> 
    <p>1</p> 
<ul class="dropdown-menu"> 
    <p>1.1</p> 
    <p>1.2</p> 
    <p>1.3</p> 
    <p>1.4</p> 
</ul> 
</li> 
<li class="dropdown"> 
    <p>1</p> 
<ul class="dropdown-menu"> 
    <p>1.1</p> 
    <p>1.2</p> 
    <p>1.3</p> 
    <p>1.4</p> 
</ul> 
</li> 

的< UL>如果< LI>單擊顯示。然後< li>的類是「下拉打開」。如果你再次點擊，則該班級將再次「下拉」，並且不顯示< ul>。

下拉菜單在desptop-view和mobile-view中顯示的不相同。但是，如果我們在移動設備上並希望單擊dropdon，則會出現桌面下拉菜單。

我tryed這段代碼解決這個問題：

.dropdown > .dropdown-menu { 
    display: none !important; 
} 
.open > .dropdown-menu { 
    display: block !important; 
} 

但失敗了。正如我在Debug with Chrome中注入此代碼一樣，它確實有效。

我錯了什麼？

Answer 1

您可以使用@media查詢摸出顯示在其屏幕尺寸

入住此頁面出來的教程，下拉菜單：Link

.dropdown.desktop > .dropdown-menu { 
 
display: none; } .dropdown.desktop.open > .dropdown-menu { 
 
display: block; } 
 
    .dropdown.mobile > .dropdown-menu, .mobile { 
 
display: none; } 
 
    @media screen and (max-width : 640px) { 
 
.dropdown.mobile > .dropdown-menu { 
 
    display: none; 
 
} 
 
.dropdown.mobile.open > .dropdown-menu { 
 
    display: block; 
 
} } 
 
    @media screen and (max-width: 768px) { 
 
.dropdown.mobile > .dropdown-menu { 
 
    display: none; 
 
} 
 
.dropdown.mobile.open > .dropdown-menu { 
 
    display: block; 
 
} } 
 

<ul class="dropdown desktop open"> 
 
<li>1</li> 
 
<ul class="dropdown-menu"> 
 
<li>1.1</li> 
 
<li>1.2</li> 
 
<li>1.3</li> 
 
<li>1.4</li> 
 
</ul> </ul> <ul class="dropdown mobile"> 
 
<li>1</li> 
 
<ul class="dropdown-menu"> 
 
<li>1.1</li> 
 
<li>1.2</li> 
 
<li>1.3</li> 
 
<li>1.4</li> 
 
</ul> </ul>