Css 看起来完全一样，是什么触发了底部菜单按钮内容消失？

Question

这个案例比较复杂为了在 jsfiddle 中重现，所以我发布了一对 url 进行比较:

(无发行版)模板演示网址:click here

有问题 url 的版本:(我已经删除了链接，因为它已解决)

(奇怪的是，通过浏览器检查元素，当浏览器宽度<1170px时，任意点击左下角的“.cd-nav-trigger”按钮，菜单不会像演示模板效果一样展开.

我想这只是一个 css 问题，但我没有发现它们的 css 样式有任何区别。

宽度<1170px 失败

//js函数部分

 //open or close the menu clicking on the bottom "menu" link
$('.cd-nav-trigger').on('click', function(){
    $(this).toggleClass('menu-is-open');
    //we need to remove the transitionEnd event handler (we add it when scolling up with the menu open)
    mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');

});

// css media queries related with 1170px 
media="all"
@media only screen and (min-width: 1170px){
.is-fixed .cd-nav-trigger {
visibility: visible;
-webkit-transition: all 0s;
-moz-transition: all 0s;
transition: all 0s;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-animation: cd-bounce-in .3s linear;
-moz-animation: cd-bounce-in .3s linear;
animation: cd-bounce-in .3s linear;
}

}

---

下面的一个答案能够解决这个问题，但在深入检查之后，我想知道为什么模板演示dcmegameu.css 文件与问题站点完全相同。所以当前的答案可能不是根本原因，但是，它确实指出了它消失的原因。 模板 dcmegamenu.css 第 53 行与问题站点 dcmegamenu.css 相同

Answer 1

在 dcmegamenu.css 中，你有这个规则:

.dd-category-item {
    display: none;
}

这意味着任何具有 dd-category-item 类的元素都将被隐藏。它在更宽的屏幕上显示的唯一原因是因为有一个屏幕宽度大于 1170 像素的 css 查询应用了不同的 display 集。

总的来说，这个站点的 css 看起来有点杂乱无章且难以使用，因为有很多相互矛盾的规则和应用的 !important 修饰符。如您所见，这往往会使解决 CSS 问题变得困难。