多个jQuery滑动内容框

我正在与两个链接的网站上工作。每个链接滑出内容与下面的内容div。我遇到的问题是，当用户单击其他链接时，我无法弄清楚如何在两者之间切换。

因此，当用户点击LINK-A时，会滑出CONTENT-A，而CONTENT-A正在显示用户是否单击了LINK-B内容-A应该在CONTENT-B滑出之前滑回。

希望这是有道理的，真的希望有人能帮助我！

2011-12-12 Simon Melhuish

HTML--

<a href="#" id="link-a">Link A</a> - <a href="#" id="link-b">Link B</a> 
<div id="container"> 
    <div id="content-a">Content A</div> 
    <div id="content-b">Content B</div> 
</div>

CSS--

每个content DIV是绝对定位在container div中，因此它可以在与出的视图是动画：

#container { 
    position : relative; 
    width : 500px; 
    height : 200px; 
} 
#content-a { 
    position : absolute; 
    top  : 0; 
    left  : 0; 
    width  : 100%; 
    height  : 100%; 
    background : red; 
} 
#content-b { 
    position : absolute; 
    top  : 0; 
    left  : -100%; 
    width  : 100%; 
    height  : 100%; 
    background : green; 
}

JS--

//cache the content area selectors since they will be used multiple times 
var $content_a = $('#content-a'), 
    $content_b = $('#content-b'); 

$('#link-a').on('click', function() { 

    //when the `a` link is clicked, animate `b` content off-screen 
    $content_b.stop().animate({ 
     left : '-100%' 
    }, 500, function() { 

     //then animate the `a` content on-screen after the `b` content's animation completes 
     $content_a.stop().animate({ 
      left : 0 
     }, 500); 
    }); 
}); 

//then do the same (but in reverse) for the `b` link 
$('#link-b').on('click', function() { 
    $content_a.stop().animate({ 
     left : '-100%' 
    }, 500, function() { 
     $content_b.stop().animate({ 
      left : 0 
     }, 500); 
    }); 
});

这里是一个演示：http://jsfiddle.net/4eN84/

来源

2011-12-12 17:51:12 Jasper

这很接近，但我正在处理的设计需要隐藏在导航下的内容。当用户点击链接时，内容向下滑动，如果内容关闭，用户点击第二个链接，则第一个内容在第二个内容下滑之前向上滑动。我已经将我当前的代码引入jsfiddle [链接]（http://jsfiddle.net/ninjarhino/4D3tv/）。正如它目前的工作，滑动内容可以同时显示，这是一个痛苦。感谢你！ –

@SimonMelhuish这个怎么样：http://jsfiddle.net/4eN84/1/。我使用'.slideUp（）'和'.slideDown（）'函数改变了向上/向下的左/右滑动。 – Jasper

得到了我需要的一点小小的调整谢谢@Jasper！当我将slideUp和SlideDown更改为SlideUp和SlideToggle时，允许用户关闭这些框：http://jsfiddle.net/ninjarhino/4eN84/11/ –

唉唉，哈，没有看到你的代码，我想你可能会发现在。不是选择使用。 http://api.jquery.com/not-selector/

$("#foo .bar").not(this).hide();

这基本上会抢什么，但你通过它的东西，然后做任何它（在这种情况下隐藏）。关于这一点的好处是，如果您打算稍后添加更多面板/窗口，那么这样做会使您的UI可扩展。

希望这可以让你得到你需要去的地方。 :)

来源

2011-12-12 17:50:07 Romanulus

你只需要一个基本的手风琴设置。

HTML ...

<a href="#sectA" class="slider">A header for content a</a> 
<div id="sectA">Some content A here</div> 

<a href="#sectB" class="slider">A header for content b</a> 
<div id="sectB">Some content B here</div>

CSS ...

.opened { display: block; } 
div { display: none; height: 200px; background: #600; } 
a { display: block; }

jQuery的...

$(".slider").click(function() { 
      var dropD = $(this).attr("href"); 
      if ($("div#" + dropD + " .opened").length) { 
       $("div.opened").slideToggle(300).removeClass("opened"); 
      } else { 
       $("div.opened").slideToggle(300).removeClass("opened"); 
       $("div#" + dropD).slideToggle(300).addClass("opened"); 
      } 
     return false; 
     });

jfiddle example HERE

来源

2011-12-12 17:56:32 Scott

在这里，一个很好的解决方案：

DEMO IN ACTION

HTML：

<h2 class="button">Open 1</h2> 
    <div class="box">Box 1</div> 

    <h2 class="button">Open 2</h2> 
    <div class="box">Box 2</div> 

    <h2 class="button">Open 3</h2> 
    <div class="box">Box 3</div>

JQ：

$('.box').hide(); 

$('.button').click(function(){ 
    var box = $(this).next(); 
    box.is(':visible') ? box.slideToggle() : ($('.box').slideUp(), box.slideDown()); 
});

只是为了解释三元运营商：

statement ? isTrue : isFalse ;

正如你所看到的，它切换已经打开盒子，也 - 隐藏打开的一个，如果你再次点击！

来源

2011-12-14 14:34:24

多个jQuery滑动内容框

回答

相关问题