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

如果手风琴中至少有一个“返回顶部”链接没有“活动”类，则您正在触发其点击事件。

于 2013-09-22T00:15:44.780 回答
1

因为你触发了点击它。

$("#accordion .item a")包括“全部显示”按钮，然后您会立即$(this).click();模拟用户单击该链接。因此，将它们送回顶部。

于 2013-09-22T00:15:37.207 回答
1

因为您在选择器中使用了空格，所以它会“单击”任何 a位于 下方的任何 .item内容#accordion，其中包括您的“返回顶部”按钮。如果您改为使用选择器：#accordion .item>a，那么它只会“单击”作为as 的直接子级的.items。

于 2013-09-22T00:19:36.010 回答
1

#accordion .item a正在触发您应该使用的 .item 中的所有链接

#accordion .item > a

触发所有第一个链接，但不触发子链接

于 2013-09-22T00:26:21.970 回答