Question

我有以下Jquery来点击按钮来显示和隐藏div。在前两次点击中，它只能。第二次单击后，URL中会出现一个＃标签，脚本不起作用。我尝试将e.preventDefault()放在方法的顶部，但这可以防止Click事件工作。这可能有什么问题？

<script>
$(document).ready(function () {
    $('.container').hide();
    $('.status-icon').text("+");

    $('#expandsections').click(function (e) {

        var allContentToggleContainers = $('.content-toggle .container');

        var allVisibleContentToggleContainers = allContentToggleContainers.filter(function () {
            return $(this).css("display") == "block";
        });

        if (allContentToggleContainers.length && allContentToggleContainers.length === allVisibleContentToggleContainers.length) {
            allContentToggleContainers.hide().next().slideUp();
            $('.status-icon').text("+");
        }
        else {
            allContentToggles.not('selector:visible').show().next().slideDown();
            $('.status-icon').text("+");
        }

        return false;
    });
});
</script>

Answer 1

这是一个jsfiddle：http://jsfiddle.net/Grimbode/VTh5C/

似乎＆＃34; allContentToggles＆＃34;应该是＆＃34; allContentToggleContainers＆＃34;代替。

当我切换它们时，代码开始按预期工作。如果这是你想要的，请告诉我。

$('.container').hide();
$('.status-icon').text("+");

$('#expandsections').click(function (e) {

    var allContentToggleContainers = $('.content-toggle .container');

    var allVisibleContentToggleContainers = allContentToggleContainers.filter(function () {
        return $(this).css("display") == "block";
    });

    if (allContentToggleContainers.length && allContentToggleContainers.length === allVisibleContentToggleContainers.length) {
        allContentToggleContainers.hide().next().slideUp();
        $('.status-icon').text("+");
    } else {
        allContentToggleContainers.not('selector:visible').show().next().slideDown();
        $('.status-icon').text("+");
    }

    return false;
});

Answer 2

这个解释可能会帮助你：

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

在这种情况下你的html是什么？（主要是扩展部分 - 是div还是标签？）

URL中的Jquery主题标签防止功能

2 个答案: