Question

我有下一个HTML代码：

<div id="main-container">
  <article id="doyou">...</article>
  <article id="theydid">...</article>
  <article id="nieuws">...</article>
  ...
</div>

我试图在点击文章外的div时隐藏文章，但不是在点击文章本身时。目前我得到了以下代码，但它无法正常工作：

代码：

$("#main-container").click(function(){
        $('article#doyou').not(this).hide();
        $('article#theydid').not(this).hide();
        $('article#nieuws').not(this).hide();
        $('article#stage').not(this).hide();
        $('article#info').not(this).hide();
        $('article#contact').not(this).hide();
        $('article#letop').not(this).hide();
    });

Answer 1

首先，我会给每篇文章一个共同的课程：

<div id="main-container">
    <article id="doyou" class="article">...</article>
    <article id="theydid" class="article">...</article>
    <article id="nieuws" class="article">...</article>
    ... other articles ...
</div>

然后在jQuery中，您可以使用该类隐藏除被点击元素之外的所有内容：

$(function() {
    $(".article").click(function() {
        hideArticles();
        $(this).show();
    });

    $("#main-container").click(function(e) {
        if (e.target.id == "main-container")
            hideArticles();
    });
});

function hideArticles() {
    $(".article").hide();
}

正如我在评论中提到的那样，没有再次显示所有文章的机制。点击文章后，其他所有文章都无法恢复。

您可能想要添加“显示文章”按钮：

$("#show-articles").click(function() {
    $(".article").show();
});

Answer 2

您可以像这样修复

$(document).ready(function() {
    $("#main-container").click(function(e) {
        $('article#doyou').not(e.target).hide();
        $('article#theydid').not(e.target).hide();
        $('article#nieuws').not(e.target).hide();
        $('article#stage').not(e.target).hide();
        $('article#info').not(e.target).hide();
        $('article#contact').not(e.target).hide();
        $('article#letop').not(e.target).hide();
    });
});

演示：http://jsfiddle.net/ynhat/5uuLc/1/

不要隐藏特定的子节点，只需单击父节点即可

2 个答案: