Question

请参见此处：http://www.wunderwedding.com/weddingvenues/search

在左侧有一个过滤器'显示更多城市......'

当点击它时，我想显示更多城市。但是现在当它被点击时，盒子会膨胀，立即再次崩溃。我不知道我做错了什么。这是显示/隐藏的代码：

$("#toggle_cities").click(function () {
    if ($("#facets_city").is(":visible")) {
        $("#toggle_cities").text('toon meer steden...');
    }
    else {
        $("#toggle_cities").text('toon minder steden...');
    }
    $("#facets_city").slideToggle("slow");
});

Answer 1

可能是事件冒泡，因此点击发生两次。

$("#toggle_cities").click(function (e) {
    e.stopPropagation(); // stops event propagation
    if ($("#facets_city").is(":visible")) {
        $(this).html('toon meer steden...');
    }
    else {
        $(this).html('toon minder steden...');
    }
    $("#facets_city").slideToggle("slow");
});

Answer 2

jQuery 1.4.2订阅的click事件（触发器事件）在_genfunc-1.6.1.js

的第252行定义的函数

function () {
    if ($("#facets_city").is(":visible")) {
        $("#toggle_cities").text('toon meer steden...');
    }
    else {
        $("#toggle_cities").text('toon minder steden...');
    }
    $("#facets_city").slideToggle("slow");
}

和

jQuery 1.4.2订阅的click事件（触发器事件）在myfuncs_en.js

的第61行定义的函数

function () {
    if ($("#facets_city").is(":visible")) {
        $("#toggle_cities").text('show more cities...');
    }
    else {
        $("#toggle_cities").text('show less cities...');
    }
    $("#facets_city").slideToggle("slow");
}

您有两个事件处理程序。我想一个用于英语，一个用于... err..Dutch？

P.S。 Visual Event bookmarklet对于这样的问题非常有用：http://www.sprymedia.co.uk/article/Visual+Event+2

Answer 3

尝试切换事件。 http://api.jquery.com/toggle-event/

$("#toggle_cities").toggle(function () {
    $(this).text('toon meer steden...');
    $("#facets_city").slideDown("slow");
},function(){
    $(this).text('toon minder steden...');
    $("#facets_city").slideUp("slow");
});

Answer 4

当我查看Web检查器的scripts-tab时，我看到页面中嵌入了三个jquery-scripts。踢出其中两个，然后再试一次。

和imho它不能成为传播问题，因为＃facets_city-element不是#toggle_cities元素的子元素。

jquery slidetoggle直接扩展和折叠

4 个答案: