内容为空时隐藏手风琴上的选项卡

Question

我在 elementor 中有这个手风琴，它填充来自 Woocommerce 产品的信息：

<div class="elementor-accordion" role="tablist">
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Directions</a></h5>
    <div>Mix the recommended amount of creme developer with your favorite hair coloring products.</div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Ingredients</a></h5>
    <div>Aqua, Hydrogen Peroxide, Cetyl Alcohol, Cetearyl Alcohol, Ceteareth-20, Diethylenetriamine Pentamethylene Phosphonic Acid, Paraffinum Liquidum, Phosphoric Acid.</div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Product Claims</a></h5>
    <div></div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Safety Information</a></h5>
    <div></div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Legal Disclaimer</a></h5>
    <div></div>
  </div>
</div>

我想在内容为空时隐藏选项卡。写了这个片段，但它不起作用：

<script>
var $span = $(".elementor-accordion-item > div:empty");
$span.parent('div').hide();
$span.parent('div').prev('h5').hide();
</script>

有什么帮助吗？

Answer 1

只需稍微调整一下您的代码即可。

$(document).ready(function(){
  var $emptyDivs = $(".elementor-accordion-item > div:empty");
  $emptyDivs.each(function(){
    $(this).parent('div.elementor-accordion-item').hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="elementor-accordion" role="tablist">
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Directions</a></h5>
    <div>Mix the recommended amount of creme developer with your favorite hair coloring products.</div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Ingredients</a></h5>
    <div>Aqua, Hydrogen Peroxide, Cetyl Alcohol, Cetearyl Alcohol, Ceteareth-20, Diethylenetriamine Pentamethylene Phosphonic Acid, Paraffinum Liquidum, Phosphoric Acid.</div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Product Claims</a></h5>
    <div></div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Safety Information</a></h5>
    <div></div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Legal Disclaimer</a></h5>
    <div></div>
  </div>
</div>

内容为空时隐藏手风琴上的选项卡

Hide tab on accordion when content is empty

jquery

tabs

accordion

elementor