Question

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中完成的非常简单

JS在这里： http://jsfiddle.net/PqaXZ/6/ （注意*：你必须向下滚动才能看到这个例子）任何人都可以解释为什么我点击“全部显示”按钮，它会触发点击“返回顶部”按钮？

我没有看到任何可能导致代码

的内容

提前多多感谢

Answer 1

好吧，在你的“全部显示”点击处理程序中，你点击了手风琴中的所有“非活动”链接：

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

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

Answer 2

因为您触发了点击它。

$("#accordion .item a")包含“全部显示”按钮，然后您及时$(this).click();模拟用户点击该链接。因此，将它们发回顶部。

Answer 3

因为您在选择器中使用了空格，所以在{em>任何 a下的任意 .item上点击{ {1}}，其中包含“回到顶部”按钮。如果您改为制作选择器：#accordion，那么它只会“点击”#accordion .item>a s的直接子项{/ 1}}。

Answer 4

#accordion .item a触发.item中的所有链接，你应该使用

#accordion .item > a

触发第一个链接而不是孩子

jQuery选择器错误

4 个答案: