Question

我的功能如下：

$(document).on("click", ".songTilesGenreContainer", function () {
    if ($(this).find(".actualTilesContainer").hasClass("minimalized")) {
        $(this).find(".actualTilesContainer").removeClass("minimalized");
        $(this).find(".actualTilesContainer").addClass("maximized");
        $(this).find(".actualTilesContainer").slideDown();
    }
    else {
        $(this).find(".actualTilesContainer").removeClass("maximized");
        $(this).find(".actualTilesContainer").addClass("minimalized");
        $(this).find(".actualTilesContainer").slideUp();
    }
});

每当用户点击.songTilesGenreContainer时，它将转到slideDown或slideUp，具体取决于它具有哪个类。问题是在那个容器中我有一些我可以点击的元素，当我点击指定的元素时，我希望.songTilesGenreContainer不会滑动。据我所知，使用.not函数完全符合我的要求，但我如何将它与.on事件处理程序一起使用？感谢

Answer 1

为您不想执行所需代码的所有元素添加一个类。在单击处理程序中检查事件目标，如果它具有该类，则不执行任何操作。试试这个

$(document).on("click", ".songTilesGenreContainer", function (e) {

        //Check if the target has that class
        if($(e.target).hasClass("className")){
            e.stopPropagation();
            return false;
        }

        if ($(this).find(".actualTilesContainer").hasClass("minimalized")) {
            $(this).find(".actualTilesContainer").removeClass("minimalized");
            $(this).find(".actualTilesContainer").addClass("maximized");
            $(this).find(".actualTilesContainer").slideDown();
        }
        else {
             $(this).find(".actualTilesContainer").removeClass("maximized");
            $(this).find(".actualTilesContainer").addClass("minimalized");
            $(this).find(".actualTilesContainer").slideUp();
            }
        }
    });

Answer 2

您可以使用

$('.actualTilesContainer').toggleClass('maximized'); //have minimised class as default
$('.actualTilesContainer').slideToggle();

我认为你所拥有的if语句对于jQuery来说是不必要的。

所以最终的代码如下：

$('.songTilesGenreContainer').on('click', '.songTilesGenreContainer', function(){

    $('.actualTilesContainer').toggleClass('maximized'); //have minimised class as default
    $('.actualTilesContainer').slideToggle();
});

Answer 3

您应该将点击处理程序绑定到子项，然后执行

event.stopPropagation();

这将阻止点击冒泡到＆＃34; .songTilesGenreContainer＆＃34;父！

Answer 4

他们是什么类型的元素？如果他们有一个附加的点击处理程序，那么你可以这样做：

var $elements = $( ".songTilesGenreContainer" );

$elements.find(".elementsYouDontWantToTriggerSlideUp").on("click", function(ev) {
    ev.stopPropagation();
    // do your stuff
});

// toggle handler is attached >after< (it won't work otherwise, as handlers
// are executed in their bind order)
$elements.on( "click", function( ev ) {
    // >>>> ALWAYS <<<< cache you elements is you reuse them, or use chaining
    var $elelements = $( this ).find(".actualTilesContainer");

    $elelements.toggleClass("minimalized maximized").slideToggle();
});

如果他们还没有处理程序，你可以这样做：

$(".whatEver").on( "someevent", function( ev ) {
    // ev.target contains the actual element that was clicked
    var $target = $( ev.target );

    // then you could use
    $target.is('.someSelector' )
    // to see if the element that was clicked should "trigger" or not the effect

});

使用jquery .not和.on处理程序绑定器

4 个答案: