捂脸。问个蠢问题

Swarm413
  • 57
jQuery(function() {
    jQuery(".hamburger-icon").click(function() {
        jQuery("body").addClass("scrollbar-hide")
    });
    jQuery(".close-ic").click(function() {
        jQuery("body").removeClass("scrollbar-hide")
    })
});

当有这段jq代码的时候是这样的
image
当把那段代码删了之后,点击折叠导航栏就不显示了
image

求教,scrollbar-hide在css文件中也仅仅是

.scrollbar-hide {
    height: 100%;
    overflow: hidden;
}

    .scrollbar-hide .menu-content-area {
        opacity: 1;
        height: 100%;
    }

引用的是JQ,bootstrap.js以及上面的那段JS代码。
为什么把那段代码删了点击折叠导航栏就不显示了呢

回复
阅读 436
3 个回答

问题解决了,这是个css动画,实现的很巧妙
.scrollbar-hide的子元素 .menu-content-area在大屏上 高度是0 ,但是当通过JQ在body中添加了scrollbar-hide元素之后,.menu-content-area高度变成了100%,动画持续效果为0.8秒
从而实现了折叠导航栏的图一效果

opacity: 1;height: 100%;都有可能造成该效果啊,其他地方是不是定义有该 element的默认样式,比如 opacity: 0; height: 0;

Bootstrap作为一个响应式框架,原理是依赖于css3的媒体查询来实现的,所以它几乎都是通过控制样式来实现页面上的元素显示与隐藏的。
一些基本的方法它都封装好了,比如下拉菜单、导航栏、tab选项卡,其他个别的可能需要写js代码触发。
所以,上面你通过js添加和移除样式,能够实现下拉菜单的显示与隐藏。

你知道吗?

宣传栏