Question

我正在使用this链接来设置我可以隐藏或显示的侧栏。如何在div的右侧添加一个栏，我可以单击以触发隐藏/显示？

到目前为止，我发现我可以在css中使用border-right: 5px solid black制作一个基本的..但我实际上不知道如何使其可点击..我确定可能有一个名字我要添加什么，但我不知道它是什么。

任何帮助都将不胜感激。

编辑：

让它与jsfiddle一起工作。但后来我搞砸了它试图将它移动到主内容div，所以在悬停时它可以向右扩展，也可以在隐藏侧面板后隐藏（可以用面板切换的css修复）{{ 3}}是我修改过的jsfiddle，但我似乎无法出于某种原因点击它。

Answer 1

将小提琴编辑成更接近我认为你需要的东西： http://jsfiddle.net/y7L2qvy6/18/

**我很抱歉。

你正试图添加这样的东西，对吗？

http://jsfiddle.net/y7L2qvy6/3/

**

导航div的打开和关闭是通过以下方式实现的：

<a href="#menu-toggle"><!--put whatever text or image you like here--></a>

并要求您包含jquery，bootstrap和以下脚本：

<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
</script>

请记住，在尝试运行脚本之前，必须指示浏览器加载jquery，如上例所示。

最后，还要确保所有页面内容都在id为“page-content-wrapper”的div内，并且div必须位于名为“wrapper”的div内。

像这样：

<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<!-- Navigation Content Here -->
</div>
<div id="page-content-wrapper">
<!-- Page Content Here -->
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>

在div的右侧添加全高按钮

1 个答案: