Question

我需要一些帮助。我希望有一个侧边栏可以在按下特定按钮时切换。侧边栏将显示，内容div将减小宽度，以便为侧边栏腾出空间。一旦单击侧边栏按钮再次隐藏它，内容div将变宽。我似乎无法让侧边栏工作。

http://jsfiddle.net/jhacks/P3Ckk/54/

我不得不改变一些东西以使其适合小提琴盒，这似乎不幸地使事情变得更糟。例如，由于某种原因，使“内容”div更宽，将其向下推？但我离题了......我正在寻求解决的主要问题：

当我点击“sidetoggleshow”按钮时，我甚至无法显示侧边栏。我的jquery代码显然做了一些明显的错误？
当隐藏侧边栏时，我不确定内容div是否扩展以填充其容器div的剩余空间是正确的解决方案。但是，当侧边栏出现时，我希望内容被推翻。我的侧边栏在html中的定位可能部分是问题。目前，我把它作为切换按钮的兄弟，所以它在topbar div中。但是，也许它必须是容器div的一部分？这样它占用内容所在的同一div内的空间？我会在jquery中引用什么？我想因为它是一个唯一的ID我根本不需要任何“兄弟姐妹”或“儿童”标签？再一次，我确实尝试了这个，但它没有用......然后再次，它不适用于兄弟姐妹方法

任何和所有帮助都非常感谢。谢谢！

Answer 1

好像你知道你需要有两个状态，但你需要在.click（）方法本身区分它们，而不是两次注册点击处理程序。

我已经摆弄了一些片段并编辑了JS和CSS代码并添加了注释，所以它应该是非常自我解释的。此外，我假设您希望默认情况下隐藏侧边栏。

http://jsfiddle.net/P3Ckk/78/

希望它有所帮助！

Answer 2

你的jQuery点击功能结束时有一个逗号 - 你没有指定第二个参数......

$('div#sideToggleShow').click(

   function() {         
    $('div#sideToggleShow').hide();
    $('div#sideToggleHide').show();
    $(this).siblings('div#side').show();
}, ); <-- what's this!?

应该是

$('div#sideToggleShow').click(

   function() {         
    $('div#sideToggleShow').hide();
    $('div#sideToggleHide').show();
    $(this).siblings('div#side').show();
});

我相信你可以从这里拿走它！

Answer 3

我已经编辑了你的代码。如果你喜欢它，抓住它，如果没有，告诉我你想要什么。 jsFIDDLE

Answer 4

进行了几次css编辑。 JSFiddle

切换导航侧边栏（CSS和JQuery）

4 个答案: