Question

jQuery初学者。

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

因此，当用户点击LINK-A时，它会滑出CONTENT-A，而CONTENT-A会显示用户是否点击LINK-B CONTENT-A应该在CONTENT-B滑出之前向后滑动。

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

Answer 1

啊哈哈，没看到你的代码，我想你可能会在.not选择器中找到它。 http://api.jquery.com/not-selector/

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

这基本上会抓住任何东西，但你传递的东西，然后做任何事情（在这种情况下隐藏）。关于这一点的好处是如果您计划稍后添加更多面板/窗口，那么这样做会使您的UI可扩展。

希望这能让你到达目的地。：）

Answer 2

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 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 ;

正如您所看到的，它会切换已打开的盒子并且 - 如果再次单击它，则会隐藏打开的盒子！

多个jQuery滑动内容框

4 个答案: