0

我正在使用 jQuery Isotope 插件。在每个可点击（最大化/最小化）同位素元素中，我生成了一个 jQuery Cycle 幻灯片，如

$('.slideshow.mainview').each(function () {

    var $pager = $('<div class="pager"></div>').insertAfter(this); // creates a pager for each slideshow

    $(this).cycle({
        speed: 300,
        timeout: 0,
        pager: $pager,
        pagerEvent: 'click',
        allowPagerClickBubble: false
    });

});

单击寻呼机链接会关闭同位素元素，因此看不到下一张幻灯片:(如何停止寻呼机点击传播到父级（同位素元素）？非常感谢任何建议！

ps：如果我使用'mouseover'作为pagerEvent，它可以工作；但幻灯片闪烁两次。所以这也不是一个简单的出路。并且 - 鼠标悬停不适用于屏幕手机和平板设备...

4

1 回答 1

0

啊，轻松。必须不使用单击事件注册同位素元素 (.item) - 但只需在其中注册任何其他元素-按钮、div 等等 - 以便接收关闭单击事件（如果没有添加自动关闭， 如下）。然后，每个同位素 .item 中的所有其他元素 - 幻灯片寻呼机，无论如何 - 都可以注册为被点击，因为它们的事件将不再冒泡到 .item 并过早关闭它:)

$(document).ready(function () {

var $container = $('#container');

$container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: 256
    }
});

$items = $('.item'); // to be able to reference methods on every .item

$('.header').click(function () { // do not register the .item as usual, but any other element within it

    var $previousSelected = $('.selected'); // necessary for switching

    if ($(this).parent().hasClass('selected')) { // now, we have to use $(this).parent() because .header is inside .item

    $items.find('.minimised, .header').removeClass('transparent'); // makes all divs .minimised opaque after an .item is closed again

        $(this).parent().removeClass('selected');
        $(this).parent().children('.maximised').hide();
        $(this).parent().children('.minimised').show();

    } else {

    $items.not(this).parent().find('.minimised, .header').addClass('transparent'); // makes all divs .minimised transparent while (this) is opened

        $previousSelected.removeClass('selected');
        $previousSelected.children('.minimised').show();
        $previousSelected.children('.maximised').hide();

        $(this).parent().addClass('selected');
        $(this).parent().children('.minimised').hide();
        $(this).parent().children('.maximised').show();

    }

    $container.isotope('reLayout');
});

});
于 2012-07-23T17:24:15.490 回答