Question

我无法为多个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();
    }); 
});

Answer 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();
    });
});

DEMO

Answer 2

将代码重新计算到

$(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是相关联的div的ID，前面是一个#。此处显示的代码：http://jsfiddle.net/Skooljester/DpffX/5/

如何切换<a> where it would work like an accordion?</a>的高度

2 个答案: