切换导航边栏（CSS和JQuery）

我需要一些帮助。我正在寻找一个边栏，当按下特定的按钮时会切换。边栏将显示，内容div的宽度将减小以为边栏腾出空间。一旦侧边栏按钮被点击以再次隐藏，内容div将会扩大。我似乎无法让边栏工作。切换导航边栏（CSS和JQuery）

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

我不得不改变事情有点让它很好地成为小提琴盒，这似乎不幸的是让事情变得更糟。例如，使“内容”div更广泛地将其向下推出某种原因？但是，我离题...我正在寻找的主要问题要解决：

我甚至不能侧边栏显示出来，当我点击“sidetoggleshow”按钮。我显然在做我的jQuery代码公然错误的东西？
我不知道正确的解决方案是什么正确的解决方案是让内容div展开，以填补侧边栏被隐藏时它的容器div的剩余空间。但是，当侧边栏显示时，我希望内容被推送。我的侧栏在html中的定位可能部分是问题。目前，我将它设为切换按钮的兄弟，因此它位于顶栏div内。但是，也许它必须是容器分区的一部分？这样它就占据了内容所在的同一个div内的空间？我会在jQuery中引用什么？我想，因为它是一个独特的ID，我不需要任何“兄弟姐妹”或“孩子”标签呢？再次，我确实尝试过，但没有奏效......再次，它不是与兄弟姐妹一起使用的方法

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

来源

2012-05-16 jstacks

你在你的代码中有拼写错误，并且使用'.show（）'和'.hide（）'将会完成所有的操作，但不会'扩展'你的元素。 http://jsfiddle.net/qYBHj/ –

YOu没有正确关闭'#top DIV'。这是我修正你的标记后发生的事情：http://jsfiddle.net/qYBHj/1/ –

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

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

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

希望它能帮助！

来源

2012-05-16 15:19:11 Ozrix

谢谢。这正是我所需要的。我最终以最初的Jquery代码方法使用了你的逻辑。我有内容元素的宽度改变，并且完美地工作。我不得不感谢在此回复的其他人，例如SupremeDud，他帮助我解决了CSS问题。还有其他人。通过所有这些，我认识到我犯过的错误，以及如何纠正这一问题以及未来的更多知识。谢谢！ – jstacks

您在您的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(); 
});

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

来源

2012-05-16 14:54:15 Charleh

你粘贴为*答案*已经在评论中讨论过的东西。并且仍然不回答OP问题。 –

啊实际上是要做一个评论:)长时间在工作tbh，一个文本框看起来像下一个文本框！ – Charleh

:)你没有失去你的幽默感我看到：D +10000 –

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

来源

2012-05-16 15:00:14

做了几个CSS编辑。 JSFiddle

来源

2012-05-16 15:21:05 SupremeDud

切换导航边栏（CSS和JQuery）

回答

相关问题