0

これを複数の div に設定するのに問題があります。ここにhttp://jsfiddle.net/DpffX/を1つだけ設定しています。リンクの高さをonclickと隠しdivのslideDownで増やしたいと思います。2 番目のリンクをクリックすると、最初の div が上にスライドし、リンクの高さが元の高さに戻り、2 番目のリンクが同じ開始シーケンスを通過するため、すべてがアコーディオンのように機能します。*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;
    });
});

<a href>HTMLでは、を次のように変更する必要があります。 <a href="#link1">、hrefは、関連付けられたIDのdiv前に。が付き#ます。ここに表示されるコード：http：//jsfiddle.net/Skooljester/DpffX/5/

于 2012-07-10T19:40:00.153 に答える