使用jQuery显示和隐藏父和子div

时间:2015-10-08 07:41:32

标签: javascript jquery

我有一个包含子html元素的div,当我点击div子元素时会显示,在那个隐藏按钮的时候我也会点击hide parent会隐藏。 please help me

2 个答案:

答案 0 :(得分:0)

在要隐藏的div上的css中使用display: none。 如果要显示它们,请在jquery中使用$("#yourdiv").css("display","block");

答案 1 :(得分:0)

最好是您可以发布您的相关代码,无论如何这里为您做的示例:

<强> HTML

<div class="parent">Hey All
  <div>a</div>
  <div>b</div>
  <div>c
    <button class="hide" data-type="parent">Hide Parent</button>
    <button class="hide" data-type="children">Hide Children</button>
  </div>
</div>
<div class="parent">Hey All 1
 <div>a</div>
 <div>b</div>
 <div>c
    <button class="hide" data-type="parent">Hide Parent</button>
    <button class="hide" data-type="children">Hide Children</button>
</div>

<强> JS

$('.parent').click(function () {
  // show direct child when parent div was clicked
  $(this).children().css('display', 'block');
});

// hide parent or child
$('.hide').click(function (e) {
  e.stopPropagation();
  var type = $(this).data('type');
  var parent = $(this).closest('.parent');

  if (type === "parent") parent.css('display', 'none');
  else parent.children().css('display', 'none');
});

DEMO