Не скрывайте определенные дочерние узлы на клике родителей - PullRequest
Новая
       15

Не скрывайте определенные дочерние узлы на клике родителей

1 голос
/ 18 мая 2011

У меня есть следующий 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();
    });

Ответы [ 2 ]

0 голосов
/ 18 мая 2011

Вы можете исправить вот так 

$(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/

0 голосов
/ 18 мая 2011

Прежде всего я бы дал каждой статье общий класс: 

<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();
});
...