0

我在为多个 div 设置这个时遇到了麻烦。我在这里http://jsfiddle.net/DpffX/只设置了一个。我想让链接的高度增加 onclick 和隐藏的 div slideDown。单击第二个链接时，第一个 div 会向上滑动，然后链接高度回到原来的高度，第二个链接经过相同的打开顺序，所以一切都像手风琴一样工作。*link 标签有一个 bg 图像，它是一条线，因此看起来像一条线被绘制到隐藏的 div。谢谢你。更新了小提琴 jsfiddle.net/J2ySt/2

HTML

<div class="slider2">
    <h2>title</h2>
    <a href="#" class="line">link1 |</a>
    <a href="#" class="line">link2 |</a>
    <a href="#" class="line">link3 |</a>
    <a href="#" class="line">link4 |</a>
</div><!-- end .slider2 -->
<div id="link1" style="height:100px; background:#000; color:#fff; margin-left:20px; display:none;">content1</div>
<div id="link2" style="height:100px; background:#000; color:#fff; margin-left:20px; display:none;">content2</div>
<div id="link3" style="height:100px; background:#000; color:#fff; margin-left:20px; display:none;">content3</div>
<div id="link4" style="height:100px; background:#000; color:#fff; margin-left:20px; display:none;">content4</div>

jQuery

$(document).ready(function(){
    $(".line").toggle(function(){
        $(this).animate({height:108},500);
        $("#link1").delay(500).slideDown();
        },function(){
            $(this).delay(500).animate({height:20},500);
            $("#link1").slideUp();
    }); 
});

​</p>

4

2 回答 2

1

你可以使用data-*属性：

<a href="#" data-link="1" class="line">link1 |</a>
<a href="#" data-link="2" class="line">link2 |</a>
<a href="#" data-link="3" class="line">link3 |</a>
<a href="#" data-link="4" class="line">link4 |</a>


$(document).ready(function(){
    $(".line").toggle(function(){
           var w = $(this).data('link');
           $(this).animate({height:108},500);
           $("#link"+w).delay(500).slideDown();
        },function(){
           var w = $(this).data('link');
           $(this).delay(500).animate({height:20},500);
           $("#link"+w).slideUp();
    });
});

演示

于 2012-07-10T19:10:50.003 回答
0

稍微重构了代码

$(document).ready(function(){
    $(".line").click(function() {
        $(".line").animate({height:20},500);
        $("[id^=link]").slideUp();
        $(this).animate({height:108},500);
        $($(this).attr("href")).delay(500).slideDown();
        return false;
    });
});

在 HTML 中，您只需确保将 更改<a href>为类似于：<a href="#link1">，其中href关联的 IDdiv前面带有#. 在这里看到的代码：http: //jsfiddle.net/Skooljester/DpffX/5/

于 2012-07-10T19:40:00.153 回答