【问题标题】：multiple show hide toggle with div sliding out多个显示隐藏切换与 div 滑出
【发布时间】：2012-12-21 20:40:28
【问题描述】：

我是编码新手，需要 jQuery 方面的帮助。我有 2 个<div>s（一个带有图像，另一个带有菜单列表，均为 50% 宽度），我需要能够单击其中一个菜单选项以使新的 div（50% 宽度）从右边，同时将其他 2 个 div 的宽度减少到每个 25%。然后单击相同的菜单选项以隐藏新的 div 并恢复为原始宽度。但是，如果我在新 div 可见时单击另一个菜单选项，我需要它将内容更改为该特定菜单选项内容。

如何将左侧的<div> 替换为 jQuery？

这是我正在使用的 HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
     <!-- SCRIPT FILES -->    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript" src="script.js"></script>     
     <!-- CSS STYLESHEETS -->    
    <link rel="stylesheet" href="reset.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css" />    
</head>
<body>
    <div id="wrapper">    
        <div id="header">        
        </div><!--header-->        
            <div id="container">        
                <div class="box-container">                
                    <div class="box1">                    
                        <img src="images/Untitled-1.png" alt="logo">                    
                    </div>                    
                    <div class="box2">                    
                        <div id="nav">                        
                            <ul>                            
                                <li><a>hello!</a></li>                                
                                <li><a>ADVERTISING</a></li>                                
                                <li><a>DESIGN</a></li>                                
                                <li><a>ABOUT</a></li>                                
                                <li><a>BLOG</a></li>                                
                                <li><a>SHOP</a></li>                                
                            </ul>                            
                        </div><!--nav-->                        
                    </div><!--box2-->                    
                    <div class="box3">                    
                        <div id="ADVERTISING" class="content">ADVERTISING</div>                        
                        <div id="DESIGN" class="content">DESIGN</div>                        
                        <div id="ABOUT" class="content">ABOUT</div>                        
                        <div id="BLOG" class="content">BLOG</div>        
                        <div id="SHOP" class="content">SHOP</div>                    
                    </div>                    
                </div><!--box-container-->            
            </div><!--container-->        
        <div id="footer">        
        </div><!--footer-->        
    </div><!-- wrapper-->        
</body>
</html>

这是一个带有样式的工作 jsFiddle：http://jsfiddle.net/YcphY/6/

【问题讨论】：

这是一个 jsfiddle jsfiddle.net/YcphY/5 我尝试从这里复制和粘贴许多其他示例，但我不知所措。
您的 JSFiddle 将无法工作，因为您尝试使用相对 URL 加载资产，即使它们位于错误的域中。要真正利用 JSFiddle 的实用性，您应该将 HTML/JS/CSS 拆分到各自的面板中。
不用 js 也可以做到
谢谢大家，我仍然迷失在这点上，并且用这些例子给你的 cmets 加上了缺口似乎由于某种原因消失了。
没有js怎么办？是css3动画吗？

标签： javascript show-hide jquery

【解决方案1】：

对于初学者，here's a method that ties the below examples of how to do this into the animation you're after:

$(function() {
  $("#nav").delegate("li","click", function() {
    var newDiv = $(".box3 .content").eq($(this).index()-1);
    newDiv.siblings().hide().end(); // hide the others
    if(newDiv.is(":visible")) {
      // if shown, fade it out, when the fade finishes, slide everything back
      newDiv.fadeOut(function() { 
        $(".box3").hide(); 
        $(".box1, .box2").animate({ width: "50%" });
      });
    } else {
      // if not shown, then slide over space, then fade in
      $(".box1, .box2").animate({ width: "25%" }, function() {
        $(".box3").show();
        newDiv.fadeIn("fast");
      });
    }
  });        
});

鉴于您当前的 CSS，您可以这样做：

$(function() {
    $("#nav").delegate("li a","click", function() {
        $(".box3").show();
        $("#" + $(this).text()).show().siblings().hide();
    });        
});

Here's a working example，尽管您可以看到 CSS 需要一些工作才能使其 100% 运行。不过，我建议进行一些更改：为您的链接和容器提供匹配 ID，如下所示：

<li><a id="ad">ADVERTISING</a></li> 

<div id="ad-container" class="content">ADVERTISING</div>

那么JS可以是：

$(function() {
    $("#nav").delegate("li a","click", function() {
        $(".box3").show();
        $("#" + this.id + "-container").show().siblings().hide();
    });        
});

Here's a working example of that...它允许您随意更改文本，而不用担心以后JS会坏。另一种选择是使用<li> 中的.index() 关闭列表中的链接索引，如果链接数在所有情况下都与<div>s 一致，即使由于“你好！”链接。

Here's an example of an index approach 与您当前的 HTML：

$(function() {
    $("#nav").delegate("li","click", function() {
        $(".box3").show();
        $(".box3 .content").hide().eq($(this).index()-1).show();
    });        
});

【讨论】：

我将顶部 jsfiddle 中的所有代码复制到我的文件中，但它似乎不起作用。我错过了什么事情吗？
我需要在我的 js 文件的开头做一个 document.ready 的事情吗？

【解决方案2】：

我认为 jQuery 的 animate 函数可能对你有用。

您需要做的是将位于窗口外的隐藏 div 添加到您的 HTML 中（或者如果您愿意，可以在 document.ready 事件上使用 jquery 动态添加它）并使用上面提到的动画将其滑入和滑出并将其绑定到菜单项的单击功能的函数。

示例代码

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow");
        hidden.removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow");
        hidden.addClass('visible');
    }
    });
});

说明

在上面的代码中，我们将代码绑定到带有id“幻灯片”的元素的click 事件。单击元素后，将启动代码。我们检查.hidden 是否有一个名为“visible”的css 类。如果不是，我们将动画隐藏的 div 滑入。如果它有一个可见的类，则将其滑出。

工作小提琴

这是为你工作的JSFiddle

一些指针

记得在隐藏的 div 的 CSS 中指定一个大于当前左侧面板的 z-index。
在隐藏 div 的 CSS 中，记得将 position 设置为 absolute 和 left 设置为 -1200px 左右（或大于 window.width() 以使其适用于所有屏幕尺寸。）

【讨论】：

不客气，我已经更新了答案并添加了更多指针。
你们能帮我解答其他问题吗？我无法让它在我的浏览器中工作。
其他答案过于复杂
我不知道如何将此答案合并到我的代码中。我在这里是一个真正的业余爱好者。
我需要它从右侧进入，并且在切换时将框 1 和框 2 的宽度分别切换为 25%。