jQuery: при нажатии родительского элемента скрыть дочерний элемент. При нажатии на дочерний элемент не скрывать его

У меня есть родительский элемент с дочерним элементом, который отображается/скрывается при нажатии определенной кнопки на странице. Кнопка просто меняет стиль с display:none на display:block, довольно просто. Дочерний элемент начинается как display:none;

Я хочу скрыть этот элемент при щелчке родительского элемента, но не при щелчке дочернего элемента, что проблематично, поскольку дочерний элемент находится отдельно от родительского элемента.

Я видел, что существует функция data();, которая может проверять, был ли нажат элемент, но, похоже, она не работает.

Вот html:

<style>

#parent {width:200px;height:200px;}
#child {display:none;width:50px;height:50px;}
#child.display {display:block;}

</style>

<div id="parent">
Some content
    <div id="child">Some other content</div>
</div>

<button id="clickMe">Toggle Child</button>

А вот и jQuery:

$(function() 
{
  $('#clickMe').click(function() 
  { 
      $('#child').toggleClass('display');
  }); 

  $('#parent').click(function()
  {
     if($('#child').data('clicked') == true )
    {
        // do nothing
    } else 
    {
      $('#child').toggleClass('display');
    }
  });
});

Ради этого примера я скрыл дочерний элемент по умолчанию. Не волнуйтесь, я не буду делать это в продакшене. Я просто работаю над выяснением того, как сделать эту базовую функциональность.

Вот ссылка на демонстрацию: jsfiddle


javascript html click jquery toggleclass
person FranticJ3    schedule 27.05.2016    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Этого можно добиться, привязав событие к дочернему элементу и остановив его распространение.

  $('#parent').click(function() {
     $('#child').toggleClass('display');
  });
  $('#child').click(function(e) {
     e.stopPropagation();
  });

Дополнительную информацию можно найти здесь

Обновленный скрипт

person LinkinTED    schedule 27.05.2016

arrow_upward
0
arrow_downward

Вот обновленная скрипта с решенной проблемой: https://jsfiddle.net/6u39dfxd/1/

$('#clickMe').click(function() { 
    $('#child').toggleClass('display');
}); 

$('#parent').click(function(event) {
    if($(this).has(event.target).length === 0) {
        $('#child').toggleClass('display');
    }
});

По сути, вы получаете event.target по щелчку и убедитесь, что он не содержится в родительском элементе. Вы можете получить более конкретную информацию, если есть более одного ребенка, но это должно решить эту проблему.

person ghost_dad    schedule 27.05.2016

arrow_upward
0
arrow_downward 

  $('#clickMe').click(function() 
  { 
      $('#child').toggle();
  }); 

  $('#parent').click(function(e)
  {
    $('#child').toggle();      
  });
    $("#parent").children().click( function(e) {
    e.stopPropagation();
  });

Думаю, это решит вашу проблему.

person Chanchal Zoarder    schedule 27.05.2016