Question

我有以下谜题，我猜这个解决方案对某些人来说非常明显。

这个想法是这样的：有一个文章列表。每篇文章最初只有摘录显示。点击文章中的任意位置隐藏摘录并显示完整故事，带照片。再次单击该文章（或其他文章）将关闭该打开的文章，并重新显示摘录。

麻烦的是，我也在使用fancybox来放大图像。当我单击图像缩略图时，我得到了关闭文章的不良效果。

如何禁用jquery“on（）”调用图像点击，同时让fancybox保持原封不动？

P.S。不确定下面的代码是否有效，它是一种有效的东西的简化......

HTML

<article>
    <h1>Article One</h1>
    <div class="first">
        Article excerpt
    </div>
    <div class="second" style="display:none">
        <a href="#" class="fancybox"><img src="blah.jpg"></a>
        Article in full
    </div>
</article>

<article>
    <h1>Article Two</h1>
    <div class="first">
        Article excerpt
    </div>
    <div class="second" style="display:none">
        <a href="#" class="fancybox"><img src="blah.jpg"></a>
        Article in full
    </div>
</article>

JAVASCRIPT

<script>
$(function(){

    $('article').on('click',function(){
        $('div').hide();
        $('div.excerpt').show();
        $(this).hide();
        $(this).closest('div').fadeIn();
    });

    $('.fancybox').fancybox();
});
</script>

下图显示了点击之前和之后的两种状态。

sample

Answer 1

这可能有用，虽然它可能会禁用fancybox：

$('article a.fancybox').on('click',function(e){
    e.stopPropagation();
});

如果上述方法无效，请尝试以下方法：

$('article').on('click',function(e){
    if (!$(e.target).is('a.fancybox')) {
        $('div').hide();
        $('div.excerpt').show();
        $(this).hide();
        $(this).closest('div').fadeIn();
    }
});

以下是一个示例 - http://jsfiddle.net/Ey5TU/1/

你的代码虽然没有用，所以我改为：

$('article').on('click',function(){
    $('div.first, div.second').toggle();
    var otherArticles = $('article').not(this);
    otherArticles.find('div.second').hide();
    otherArticles.find('div.first').show();
});

Answer 2

检查点击的元素（或其子元素）到event.target类是否具有fancybox类。

$('article').on('click', function(e) {
    var $target = $(e.target);
    if ($target.hasClass('fancybox') || $target.children().hasClass('fancybox')) return;
    $('div').hide();
    $('div.excerpt').show();
    $(this).hide();
    $(this).closest('div').fadeIn();
});

Answer 3

您可以在fancybox插件上使用stopPropagation，以防止它向下冒泡到文章。但你也可以看看你自己的方法，看看是谁在触发它

<script>
$(function(){
    $('article').on('click',function(e){
        if(e.target === this) {
            $('div').hide();
            $('div.excerpt').show();
            $(this).hide();
            $(this).closest('div').fadeIn();
        }
    });
    $('.fancybox').fancybox();
});
</script>

问题在于，如果您的文章中有任何元素，并且如果您想要触发“关闭”事件，则需要将其添加到OK条件，否则您只需查看e.target是否有fancybox的claass，如果没有，则触发动画。

你如何有选择地禁用jquery的on（）触发器？

3 个答案: