2

私はにshow/hide満足する方法を尋ねていませんclick。

私が知りたいのは、2つのdivを上下に配置することで、下部のdivをクリックすると、上部のdivを「閉じる」という効果を得ることができるということだけです。それで全部です。正確にはアコーディオンではありませんが、私の状況ではこれで十分です。

下のdivをクリックした後、上のdivの高さを0にアニメートすることでこれを達成しようとしました。それは動作しますが、十分にスムーズではありません。そしてIEブラウザはそれを気に入らなかった：

JQUERY

$('#BottomDiv').click(function() {    
    $('#UpperDiv').animate({ height: '0px' }, "slow");
});

マークアップ側では、両方のdivがposition-relativeです：

HTML

  <div id="UpperDiv" style="height:190px; width:100%; margin-top:80px; position:relative">
  </div>
  <div id="BottomDiv" style="width:100%; position:relative; z-index:10; float:left;" >
  </div>

だから私は、jQueryアコーディオンが行うように、これを達成するためのより良い方法があるのではないかと興味がありました。スムーズで、すべてのブラウザで機能します。

4

3 に答える 3

2

次のような構造を想定します。

<div id="accordionWrapper">
    <div id="UpperDiv" class="accordionSlides">
        <h2>Accordion tab</h2>
        <!-- other content, 'p' elements in the demo -->
    </div>

    <div id="MiddleDiv" class="accordionSlides">
        <h2>Accordion tab</h2>
        <!-- other content, 'p' elements in the demo -->
    </div>

    <div id="BottomDiv" class="accordionSlides">
        <h2>Accordion tab</h2>
        <!-- other content, 'p' elements in the demo -->
    </div>
</div>​

それから私は提案します：

$('#accordionWrapper .accordionSlides').click(
    function(){
        var cur = $(this);
        cur.siblings().children().not('h2').slideUp(); // hides
        cur.find('p').slideToggle(); // shows
    });​

JS フィドルのデモ。

参考文献:

于 2012-05-30T17:55:44.477 に答える
0 
$('#BottomDiv').click(function() {    
    $('#UpperDiv').css("display", 'none');
});

簡単な解決策は上記のとおりですが、次のような css クラスを定義する方がより洗練されています。

.invisible
{
    display: none;
}

また、addClass 関数を使用して何かを非表示にすることができます。また、タグから removeClass を使用してこのクラスを削除し、再度表示することができます。

于 2012-05-30T17:12:55.893 に答える