1

HTML:

<div id="accordion">
    <div class="top">
        <a href="" class="showAll">Show all</a> &nbsp; | &nbsp; <a href="" class="hideAll">Hide all</a>
    </div>
    <div class="body">
        <div class="item">
            <a href="" class="head" title="show">item1</a>
            <div class="content">
                <p>
                    Item1 content;
                </p>
                <a href="" class="backToTop">Back to top</a>
            </div>
        </div>
        <div class="item">
            <a href="" class="head" title="show">Item2</a>
            <div class="content">
                <ul>
                    <li>item2 content;</li>
                    <li style="list-style: none"><a href="" class="backToTop">Back to top</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

JS:

$("#accordion .content").slideUp();
$("#accordion .item a.head").click(function (e) {

    //open tab when click on item

    e.preventDefault();
    $(this).toggleClass('active');
    $(this).next().stop().slideToggle();
    if ($(this).hasClass('active')) {
        $(this).attr('title', 'hide');
    } else {
        $(this).attr('title', 'show');
    }
});
$("#accordion .showAll").click(function (e) {

    //open all tab

    e.preventDefault();
    $("#accordion .item a").each(function () {
        if (!$(this).hasClass('active')) {
            $(this).click();
        }
    });
});
$("#accordion .hideAll").click(function (e) {

    //hide all tab

    e.preventDefault();
    $("#accordion .item a").each(function () {
        if ($(this).hasClass('active')) {
            $(this).click();
        }
    });
});

$(".backToTop").click(function (e) {

    //scroll to top

    e.preventDefault();
    $('body, html').animate({
        scrollTop: 0
    }, 450);
});

基本的にはアコーディオンであり、jqueryで行われる非常に単純なものです

JSfiddle はこちら: http://jsfiddle.net/PqaXZ/6/ (注: 例を見るには下にスクロールする必要があります) [すべて表示] ボタンをクリックすると、[トップに戻る] をクリックする理由を誰でも説明できます。 " ボタン？

コードでそれを引き起こす可能性のあるものは何もありません

事前にどうもありがとう

4

4 に答える 4

2

さて、「すべて表示」クリック ハンドラーでは、アコーディオン内のすべての「非アクティブ」リンクをクリックしています。

$("#accordion .item a").each(function () {
    if (!$(this).hasClass('active')) {
        $(this).click();
    }
});

アコーディオン内のどこかにある「トップに戻る」リンクの少なくとも 1 つに「アクティブ」なクラスがない場合、そのクリック イベントをトリガーしています。

于 2013-09-22T00:15:44.780 に答える
1

クリックをトリガーしているからです。

$("#accordion .item a")「すべて表示」ボタンが含まれている$(this).click();と、そのリンクをクリックしたユーザーをすぐにシミュレートできます。したがって、それらをトップに戻します。

于 2013-09-22T00:15:37.207 に答える