0

今日は長い間遊んでいて、知らないうちに何かを成し遂げようとしていました。しかし、私はこの説明でJSをいじくりまわしたので、誰かが私を助けてくれることを願っています。

要点をつかみましょう。

私は4つの小さな箱を持っています。このフィドルのように、各ボックスは15x15pxです。

<div class="js-fiddleWrap">
    <div id="letterA">Letter A opened-content.</div>
    <div id="letterB">Letter B opened-content.</div>
    <div id="letterC">Letter C opened-content.</div>
    <div id="letterD">Letter D opened-content.</div>
    
    <nav class="collapseMenu">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </nav>
</div>​

1つのボックスをクリックすると、アニメーションが開始され、ボックスが高く（長く）なり、15pxではなく45pxになります。また、上昇するため、このスクリプトを使用して上昇しているように見えます。

$(document).ready(function() {
    var $collapseMenu = $('.collapseMenu li');

    $collapseMenu.on('click', function() {
        $(this).animate({
            'bottom': '30',
            'height': '45',
        });
    });
});​

私はこれを作りましたが、それは間違っていると思います。このアニメーションの後、私が達成できなかったことがたくさんあります。

フィドルのように隠されたコンテンツがいくつかあります。例A、B、C、およびDのコンテンツ。したがって、クリックされた各ボックスが表示され、コンテンツが表示され、同じボックスまたは異なるボックスがクリックされた場合はコンテンツが非表示になります。

また、最小のバックエフェクトを作成できませんでした。つまり、同じボックスが立ち上がってコンテンツが表示されたら、同じボックスをもう一度クリックすると、デフォルトの位置に戻ります。同様に、別のボックスをクリックしても同じことが起こります。以前に開いたボックスを非表示にして最小化します。

フィドル

4

2 に答える 2

1

簡単な解決策は、.toggleを使用することです

$(document).ready(function() {
    var $collapseMenu = $('.collapseMenu li');

    $collapseMenu.toggle(
//odd clicks
    function(){
        $(this).animate({
            'bottom': '30',
            'height': '45',
        });
    },
//even clicks
    function(){
        $(this).animate({
            'bottom': '0',
            'height': '15',
        });
    });

});​

これで、ロジックを追加して、他のボックスのいずれかが切り替えられているかどうかを確認したり、他のすべてのボックスをbottom：0に設定したりできます。高さ：15; ボックスのいずれかをクリックすると

于 2012-10-03T20:24:59.963 に答える
1

このjsFiddleの例を試してください

jQuery

var $collapseMenu = $('.collapseMenu li');
$collapseMenu.on('click', function() {
    $collapseMenu.stop(true,true).animate({
        'bottom': '0',
        'height': '15'
    });
    if($(this).height() != 45 ) $(this).stop(true,true).animate({
        'bottom': '30',
        'height': '45'
    });
});​
于 2012-10-03T20:14:46.473 に答える