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>

＆lt; ul＆gt;如果＆lt; li>点击。然后是＆lt; li>是“打开”。如果你再次点击，那么该类再次“下拉”并且＆lt; ul＆gt;没有显示。

desptop-view和mobile-view中的下拉菜单显示不同。但是，如果我们在移动设备上并想要点击dropdon，则会出现桌面下拉列表。

我尝试使用此代码来解决此问题：

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

但它失败了。当我使用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>

CSS：显示错误

1 个答案: