1

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

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

我不得不稍作改动以使其适合小提琴盒，不幸的是，这似乎使事情变得更糟。例如，使“内容” div 更宽会出于某种原因将其向下推？但我离题了......我要解决的主要问题：

  1. 当我单击“sidetoggleshow”按钮时，我什至无法显示侧边栏。我的 jquery 代码显然做错了什么？

  2. 我不确定正确的解决方案是在隐藏侧边栏时让内容 div 扩展以填充其容器 div 的剩余空间。但是，当侧边栏出现时，我希望将内容推送过来。我的侧边栏在 html 中的定位可能是部分问题。目前，我将它设为切换按钮的兄弟，因此它位于顶部栏 div 中。但是，也许它必须是容器 div 的一部分？以便它占用内容所在的同一 div 内的空间？我会在 jquery 中引用什么？我想既然它是一个唯一的 ID，那么我根本不需要任何“兄弟姐妹”或“孩子”标签吗？再次，我确实尝试过，但它没有用......再一次，它也不适用于兄弟姐妹方法

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

4

4 回答 4

2

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

我稍微修改了一下代码片段并编辑了 JS 和 CSS 代码并添加了注释，所以它应该很容易解释。另外，我假设您希望默认情况下隐藏侧边栏。

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

希望能帮助到你！

于 2012-05-16T15:19:11.137 回答
1

您的 jQuery click 函数末尾有一个逗号 - 您还没有指定第二个参数...

$('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();
});

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

于 2012-05-16T14:54:15.950 回答
1

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

于 2012-05-16T15:00:14.913 回答
1

做了几个css编辑。JSFiddle

于 2012-05-16T15:21:05.520 回答