激活响应式菜单时隐藏div？

Question

我有一个加力主题的 Joomla 网站。

在移动设备上查看时，导航菜单切换显示为右上角的按钮（显示导航菜单的标准移动方式）。

我遇到的问题是导航菜单上方的内容太多，所以当导航菜单打开时，如果不向下滚动就看不到它。我知道我可以在移动设备上完全删除它，但我不想这样做。

这是处理菜单的 CSS

.clearfix {
    *zoom: 1;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}
.clearfix:after {
    clear: both;
}

ul.level3 {

}

.hide-text {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}
.input-block-level {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.rok-left {
    float: left;
}
.rok-right {
    float: right;
}
.rok-dropdown-group,
.rok-dropdown {
    position: relative;
}
.rok-dropdown-open .rok-dropdown {
    display: block;
}
.rok-popover-group,
.rok-popover {
    position: relative;
}
.rok-popover-open .rok-popover {
    display: block;
}
.gf-menu {
    -webkit-box-shadow: inset 0 1px 1px #ffffff;
    -moz-box-shadow: inset 0 1px 1px #ffffff;
    box-shadow: inset 0 1px 1px #ffffff;
}
.gf-menu-toggle {
    padding: 7px 10px;
    border-radius: 4px;
    background-color: #f0f0f0;
    background-image: -moz-linear-gradient(top, #ffffff, #dadada);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#dadada));
    background-image: -webkit-linear-gradient(top, #ffffff, #dadada);
    background-image: -o-linear-gradient(top, #ffffff, #dadada);
    background-image: linear-gradient(to bottom, #ffffff, #dadada);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffd9d9d9', GradientType=0);
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    cursor: pointer;
}
.gf-menu-toggle.active {
    background-color: #dcdcdc;
    background-image: -moz-linear-gradient(top, #cdcdcd, #F3F3F3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cdcdcd), to(#F3F3F3));
    background-image: -webkit-linear-gradient(top, #cdcdcd, #F3F3F3);
    background-image: -o-linear-gradient(top, #cdcdcd, #F3F3F3);
    background-image: linear-gradient(to bottom, #cdcdcd, #F3F3F3);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffcccccc', endColorstr='#fff3f3f3', GradientType=0);
}
.gf-menu-toggle .icon-bar {
    background-color: #32373D;
    border-radius: 1px 1px 1px 1px;
    display: block;
    height: 2px;
    width: 18px;
}
.gf-menu-toggle .icon-bar + .icon-bar {
    margin-top: 3px;
}
@media (max-width: 767px) {
    .layout-mode-responsive .gf-menu-device-wrapper {
        margin-bottom: 15px !important;
    }
    .layout-mode-responsive .gf-menu-device-container {
        background: #741c1b;
        border-radius: 5px;
        padding: 5px;
    }
    .layout-mode-responsive .gf-menu-device-container select {
        margin-bottom: 0;
        width: 100%;
    }
    .layout-mode-responsive .gf-menu {
        background-clip: content-box;
        -webkit-background-clip: content-box;
        background: #741c1b;
        border: none !important;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        width: 100%;
        margin: 0;
    }
    .layout-mode-responsive .gf-menu ul {
        padding-left: 20px;
    }
    .layout-mode-responsive .gf-menu li {
        margin-right: 0 !important;
    }
    .layout-mode-responsive .gf-menu li.active.last {
        border: 0 !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
    .layout-mode-responsive .gf-menu li.active.last > .item {
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.5);
    }
    .layout-mode-responsive .gf-menu li:hover > .item {
        color: !important;
    }
    .layout-mode-responsive .gf-menu li .item {
        padding: 0 10px !important;
        border: none !important;
        color: #FFFFFF;
        line-height: 30px;
    }
    .layout-mode-responsive .gf-menu li .item.subtext em {
        display: none;
    }
    .layout-mode-responsive .gf-menu li .item:after {
        content: '' !important;
        border-right: 0 !important;
    }
    .layout-mode-responsive .gf-menu .dropdown {
        width: 100% !important;
        border: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background: transparent !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        position: relative;
        left: inherit;
        top: inherit;
        opacity: 1;
        *zoom: 1;
    }
    .layout-mode-responsive .gf-menu .dropdown:before,
    .layout-mode-responsive .gf-menu .dropdown:after {
        display: table;
        content: "";
        line-height: 0;
    }
    .layout-mode-responsive .gf-menu .dropdown:after {
        clear: both;
    }
    .layout-mode-responsive .gf-menu .dropdown .flyout {
        display: block;
    }
    .layout-mode-responsive .gf-menu .dropdown .column {
        width: 100% !important;
    }
    .layout-mode-responsive .gf-menu .dropdown .grouped ol {
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .layout-mode-responsive .gf-menu .dropdown .modules {
        display: none;
    }
    .layout-mode-responsive .gf-menu.l1 > li {
        float: none;
    }
    .layout-mode-responsive .gf-menu.l1 > li.active {
        margin-left: 0px;
        background: transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border: 0;
    }
    .layout-mode-responsive .gf-menu.l1 > li > .item {
        font-size: 15px;
        line-height: 40px;
        border-right: none !important;
    }
	.layout-mode-responsive .gf-menu ul.level3 {
		display:none; 
	}
	
	.layout-mode-responsive .award-winning {
	display:none;
	}
}

我想要发生的是当以下运行时

.gf-menu-toggle.active {

对于某些 div（即 div="awards"），它还应该有一个 'display:none'。我不确定如何实现？

Answer 1

要将样式应用于特定选择器 (.gf-menu-toggle.active) 中的“某些 div” (div#awards)，请执行以下操作：

.gf-menu-toggle.active div#awards { display: none; }

这会将display: none 样式应用于.gf-menu-toggle.active 元素中您想要的任何元素。

Answer 2

除非您要隐藏的“某些 div”包含在您使用 CSS 定位的 .active 类中，否则您将无法使用 CSS 隐藏它们。

你有两个选择：

1) 查看是否将另一个类添加到主体或层次结构中更高的某个元素，以便您可以将其定位到您的“某些 div”

2) 像这样使用一些 jQuery：

 $('ul').click(function(){
   var certainDivs = $('div#awards, #other-div, .certain-div');
   if ($('.gf-menu-toggle').hasClass('active')){
     $(certainDivs).hide();
   }
   else{
     $(certainDivs).show()
   }
 });

那个 jQuery 应该绑定到一个事件（比如当 <ul> 被点击或什么的时候），所以函数会触发并做它的事情。

祝你好运！