Question

我正在制作一个项目，在页面两侧的框架集中有两个框架。左边的框架称为“左”，右边的框架称为“右”。我正在尝试为左框指定一个“隐藏/显示”按钮;该按钮将分配在左侧框架上，它将隐藏左侧框架，从而使右侧框架更宽。我试过搜索，但没有解决方案。

我是这个网页设计的新手，所以，如果有人帮我伸出援助之手，我将感到很荣幸。我希望我没有把事情弄得太复杂。

谢谢你，期待您的回复.........

Answer 1

正如其他人所说，框架可能会让你陷入困境。最简单的路线可能只是将你的两列包装在div中。 <body>标记上的类指示两者的宽度和可见性。 “隐藏”和“显示”最左侧列的过程只是使用javascript切换主体标记上的哪个类。

这是一个简单的例子。

<body class="two-col">
  <div class="sidebar">
    <a id="hide-sidebar">Hide</a>
    Left
  </div>
  <div class="main">
    Right
  </div>
</body>

body.two-col .sidebar {
  width: 25%;
  position: absolute;
  top: 0;
  left: 0;
}

body.two-col .main {
  width: 75%;
  margin-left: 25%;
}

body.one-col .sidebar {
  display: none;
}

$('#hide-sidebar').click(function() {
  body = $('body');
  if (body.hasClass('one-col')) {
    body.addClass('two-col').removeClass('one-col');
  } else {
    body.addClass('one-col').removeClass('two-col');
  }
});

隐藏和显示框架集中框架的按钮

1 个答案: