Question

我正在制作移动网站宽度侧边栏，通过向左和向右滑动显示。

有一个div容器，包括其他三个div块：菜单（左侧边栏），内容和右侧边栏。侧边栏位于内容的左侧和右侧，“position：absolute”。因此，通过更改容器的左侧位置，在滑动时添加类会显示左侧或右侧边栏。

问题是容器有水平滚动条。 “溢出：隐藏”不起作用。你有什么想法吗？

所以，HTML

.container {
  position: relative;
}
.container > div {
  height: 200px;
}
.container-show-left-sidebar {
  left: 300px;
}
.container-show-right-sidebar {
  right: 300px;
}

.content {
  background-color: cyan;
}

.left-sidebar,
.right-sidebar {
  width: 300px;
  position: absolute;
  top: 0;
}
.left-sidebar {
  background-color: tomato;
  left: -300px;
}
.right-sidebar {
  background-color: yellow;
  right: -300px;
}

CSS

java -jar {PATH_TO_JAR}

Answer 1

您可以将overflow：hidden添加到.container，但是您需要将左侧边栏移到左侧：0，右侧边栏右侧：0，当他们点击时

目前，如果您打开侧边栏，内容区域只会移动 - 您还需要从容器外部带入侧边栏。

我为您做了一个Codepen fork，但有一些变化：

http://codepen.io/anon/pen/PPgyPg

首先，不是向左或向右移动内容，我们将在左侧和右侧应用填充，因为侧边栏位于容器的边缘，我们最终会在每侧有300px的空白区域。

其次，我们将使用一些事件委派，而不是在按钮上使用onclick属性中的JS，并将类应用到侧边栏以移入和移出它们：

// When your show content button is clicked
$('#show-content').on('click', function() {

    // Remove both left and right classes to reset padding
    $('#container').removeClass('container-show-right-sidebar container-show-left-sidebar');

    // Remove active classes from both sidebars
    $('.right-sidebar, .left-sidebar').removeClass('active');
});

// When your left sidebar button is clicked
$('#show-left-sidebar').on('click', function() {

    // Remove the right sidebar class if it's applied and add the left sidebar classs
    $('#container')
        .addClass('container-show-left-sidebar')
        .removeClass('container-show-right-sidebar');

    // Remove active class from right sidebar
    $('.right-sidebar').removeClass('active');

    // Add active class to left sidebar
    $('.left-sidebar').addClass('active');
});

// When your rightsidebar button is clicked
$('#show-right-sidebar').on('click', function() {

    // Remove the leftsidebar class if it's applied and add the rightsidebar class
    $('#container')
        .removeClass('container-show-left-sidebar')
        .addClass('container-show-right-sidebar');

    // Add active class to right sidebar
    $('.right-sidebar').addClass('active');

    // Remove active class from left sidebar
    $('.left-sidebar').removeClass('active');
});

Answer 2

我将overflow:hidden添加到body并且它正在运行。笔：http://codepen.io/anon/pen/RWOeaE

删除块中的水平滚动，其中“position：absolute”div为内部

2 个答案: