多個jQuery滑動內容框

Question

jQuery初學者在這裏。

我正在與兩個鏈接的網站上工作。每個鏈接滑出內容與下面的內容div。我遇到的問題是，當用戶單擊其他鏈接時，我無法弄清楚如何在兩者之間切換。

因此，當用戶點擊LINK-A時，會滑出CONTENT-A，而CONTENT-A正在顯示用戶是否單擊了LINK-B內容-A應該在CONTENT-B滑出之前滑回。

希望這是有道理的，真的希望有人能幫助我！

Answer 1

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/

Answer 2

唉唉，哈，沒有看到你的代碼，我想你可能會發現在。不是選擇使用。 http://api.jquery.com/not-selector/

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

這基本上會搶什麼，但你通過它的東西，然後做任何它（在這種情況下隱藏）。關於這一點的好處是，如果您打算稍後添加更多面板/窗口，那麼這樣做會使您的UI可擴展。

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

Answer 3

你只需要一個基本的手風琴設置。

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

Answer 4

在這裏，一個很好的解決方案：

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 ;

正如你所看到的，它切換已經打開盒子，也 - 隱藏打開的一個，如果你再次點擊！