Question

我正在使用show hide滑块，该滑块适用于向下滑动，但没有响应滑动，有人可以解释我在哪里出错：

var moreServicesList = $('#more-services-list').hide();

$('#more-services').on('click', function(e) {
    var flag = 0;
    if( flag === 0) {
        flag = 1;
        moreServicesList.slideDown('slow');
        $(this).html('Hide');
    } else {
        moreServicesList.slideUp('slow');
        $(this).html('Show');
        flag = 0;       
    }
    e.preventDefault();
});

提前致谢凯尔

Answer 1

您必须将var flag = 0;移到事件监听器之外 - http://jsfiddle.net/Nnhz8/

var moreServicesList = $('#more-services-list');
var flag = 0;

$('#more-services').on('click', function(e) {

    if( flag == 0) {
        moreServicesList.slideDown('slow');
        flag = 1;
        $(this).html('Hide');
    } else {
        moreServicesList.slideUp('slow');
        $(this).html('Show');
        flag = 0;       
    }
    e.preventDefault();
});

Answer 2

您可以使用切换方法，如

$('#more-services').on('toggle', function(e) {
        $('#more-services-list').slideDown('slow');
        $(this).html('Hide');
    } function(){
        $('#more-services-list').slideUp('slow');
        $(this).html('Show');   
    }
});

每次在你的情况下初始化为

时，

var标志

Answer 3

每次调用事件处理程序时，您都会重置标志：

$('#more-services').on('click', function(e) {
    var flag = 0;
}

要解决此问题，请在事件处理程序前面移动标记声明：

var flag = 0;
$('#more-services').on('click', function(e) {}

以下是一个有效的例子：http://jsfiddle.net/wMNtT/

Answer 4

因为您在函数内定义了flag。每次调用函数时它都会重置为零。

在jquery中遇到slideUp方法的问题

4 个答案: