Question

所以在我的Javascript中，我有这个

$('ul li').click(function(){ //loops through all <li>'s inside a <ul>

    $('ul .clicked').removeClass('clicked'); // when an <li> is clicked, remove .clicked class from any other <li>'s
    $(this).addClass('clicked'); // add .clicked class to the clicked <li> ($(this))

    $(this).screenSlide();
});

现在，screenSlide函数就是这个

$.fn.screenSlide = function(){ // $(this) = aboutSectorNineteen (<li>'s id)

    var test = $('.current').attr('id'); //if an element with .current as it's class exists, let test be equal to that elements id
    test = "#" + test;
    $(test).slideUp(); // slide it up, hide it and remove the .current class from the <li> element
    $(test).hide();
    $(test).removeClass('current');
    var gettingShown = $(this).attr('id');
    gettingShown = "#" + gettingShown + "Slide";
    $(gettingShown).addClass('current'); // add the .current class to $(this) <li>
    $(gettingShown).slideDown();
};

现在，gettingShown确实向上滑动，当我点击另一个＆lt; li>然后滑动的屏幕（gettingShown）确实隐藏了，但它没有滑动。这意味着

$(test).hide();

正在运作

$(test).slideUp();

不起作用，对吗？这是为什么？我也尝试将slideUp更改为fadeOut，但仍然无法正常工作。我将slideDown更改为fadeIn并且它有效。为什么slideUp和fadeOut不起作用？我使用不正确吗？

Answer 1

slideUp()是异步的，它会在完成向上滑动时隐藏元素。

应该是

$(test).slideUp(function () {
    $(this).removeClass('current');
});

Answer 2

这是绑定事件和操作的更简洁版本。

$('ul > li').click(function() { //loops through all <li>'s inside a <ul>
    $('li').removeClass('clicked'); // when an <li> is clicked, remove .clicked class from any other <li>'s
    $(this).addClass('clicked').screenSlide(); // add .clicked class to the clicked <li> ($(this))
});

$.fn.screenSlide = function() { // $(this) = aboutSectorNineteen (<li>'s id)
    var test = $('.current').attr('id'); //if an element with .current as it's class exists, let test be equal to that elements id
    $('#' + test).slideUp().removeClass('current'); // slide it up, hide it and remove the .current class from the <li> element
};

JQuery slideUp和fadeOut'不工作'？

2 个答案: