如何使用jquery（不重复）检查在元素内隐藏元素？

Question

我的<div>It's working fine.....</div> div { height: calc(100vh - 8vw); background: #000; overflow:visible; color: red; } 标记为div：

i

首次点击<div class="accordion-heading datalist" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id">div <i class="fa fa-chevron-down table-middle" aria-hidden="true">i tag</i> </div> 时，div代码应该会消失，然后在i下再次显示div代码。我怎么能这样做？

Answer 1

您可以使用toggle()来实现这一目标：

$('.accordion-heading').click(function() {
    $(this).find('i').toggle();
});

请注意，根据您的样式规则，可能很难和/或无法点击隐藏div的{​​{1}}元素，因为它没有高度。要解决此问题，您可以在i上设置min-height规则，或在其中放置一个不间断的空格（div）。

  

我想在 和display: none

之间切换

在这种情况下，您必须自己管理display: tablecell值，如下所示：

display

Answer 2

使用jquery {{1}}。 检查一下 jsfiddle

Answer 3

没有jQuery：

var accordion = document.querySelector('.accordion-heading');
accordion.addEventListener('click', toggleTag);

function toggleTag() {
  var tagToToggle = accordion.querySelector('i');

  if (!tagToToggle.classList.contains('active')) {
    tagToToggle.classList.add('active');
  } else {
    tagToToggle.classList.remove('active');
  }
}

CSS：

i {
  display: none;
}

i.active {
  display:block;
}

Answer 4

您也可以使用 toggleClass（）方法，但是为jquery函数创建 css 类。最可定制的

＆＃xA;＆＃xA;

＆＃xA;

.display-none {display：none;} 或

＆＃xA; ＆＃XA;

.display-none {opacity：0; transition：1s solid ease;}

＆＃xA;

＆＃xA;＆＃xA;

  $（'。accordion -heading'）。on（'click'，function（）{＆＃xA; $（this）.find（'i'）。toggleClass（'display-none'）;＆＃xA;}）;＆＃xA ;  

＆＃xA;＆＃xA;

点击此处查看示例-jsbin

＆＃xA;