隐藏基于儿童类的内容

Question

我需要代码方面的帮助，我有两个具有相同类名的 HTML div 块，并且在一个 div 块中存在一个具有不同类的额外 h2 标记。如果该 div 中不存在 h2 类名，我想隐藏并显示是否存在 h2 类名。请找到我创建的下面提到的代码。

-- 第一个块Div--

<div class="course-content">
    <h2 class="accesshide"></h2>
    <ul class="topics">
        <li class="data-list">Content not to Display</li>
    </ul>
    <div class="row">
        <p>Content to Display</p>
    </div>
</div>

-- 第二块分区--

<div class="course-content">
    <ul class="topics">
        <li class="data-list">Content not to Display</li>
    </ul>
    <div class="single-section">
        <p>Content to Display</p>
    </div>
</div>

-- jQuery 代码--

$(document).ready(function () {
    if ($(".course-content").find(".accesshide")) {
        $(".course-content").find(".topics").show();
    } else if ($(".course-content").find(".single-section")) {
        $(".course-content").find(".topics").hide();
    } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-content">
        <h2 class="accesshide"></h2>
        <ul class="topics">
            <li class="data-list">Content not to Display</li>
        </ul>
        <div class="row">
            <p>Content to Display (this statement is inaccurate)</p>
        </div>
    </div>
    
    <div class="course-content">
        <ul class="topics">
            <li class="data-list">Content not to Display (this statement is inaccurate)</li>
        </ul>
        <div class="single-section">
            <p>Content to Display</p>
        </div>
    </div>

Answer 1

由于控件是独立事件，因此应单独评估它们。因此，应该使用两个单独的if 块。在下面解决方案的第二个事件中，被选中元素的父元素的第一个子元素被选中隐藏。

$(document).ready(function () {
  if ($(".course-content").find(".accesshide")) {
      $(".course-content > .accesshide").find(".topics").show();
  } 

  // Because both <div> elements have the ".topics" class style applied, the ".single-section" 
  // element is selected and the first child element of the parent element is hidden.
  if ($(".course-content").find(".single-section")) {
      $(".course-content > .single-section").parent().children(':first-child').hide();
  } 
});

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

<div class="course-content">
  <h2 class="accesshide"></h2>
  
  <ul class="topics">
      <li class="data-list">Content not to Display</li>
  </ul>
  
  <div class="row">
      <p>Content to Display</p>
  </div>
</div>

<hr>
    
<div class="course-content">
  <ul class="topics">
      <li class="data-list">Content not to Display</li>
  </ul>
  
  <div class="single-section">
      <p>Content to Display</p>
  </div>
</div>

Answer 2

使用 CSS 子选择器 (>) 很简单。只需找到属于course-content 的accesshide 子元素的集合，并隐藏其父元素的topics 子元素。

您可以使用后代选择器 ( ) 执行类似的操作，但由于您知道在这种情况下它是子选择器，因此子选择器可能更准确。

MDN's Child Combinator docs.

$(document).ready(function () {
    $('.course-content>.accesshide').parent().find('.topics').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-content">
        <h2 class="accesshide"></h2>
        <ul class="topics">
            <li class="data-list">Content not to Display</li>
        </ul>
        <div class="row">
            <p>Content to Display</p>
        </div>
    </div>
    
    <div class="course-content">
        <ul class="topics">
            <li class="data-list">Content not to Display (this should actually be shown - there's no h2 in the parent div)</li>
        </ul>
        <div class="single-section">
            <p>Content to Display</p>
        </div>
    </div>

Answer 3

如果该 div 中不存在 h2 类名，我想隐藏并显示是否存在 h2 类名。

您不需要任何 JS 代码，只需要带有 adjacent 或 general 兄弟组合符的 CSS。例如：

.course-content .topics {
  display: none;
}
.course-content .accesshide + .topics {
  display: block;
}

当您必须使用 jQuery 时，您可以使用相同的逻辑和 .next() 方法（或 .nextAll()）：

$(".course-content").find(".topics").hide();
$(".course-content").find(".accesshide").next(".topics").show();  

如果控制块可以在控制块之前和之后，那么最短的方法是使用.siblings()方法。如果您需要在附近有.accesshide 块或.single-section 块的情况下显示.topics 块，则可以在这两种情况下使用此jQuery 方法：

$(document).ready(function () {
    $(".course-content").find(".topics").hide();
    $(".course-content").find(".accesshide, .single-section").siblings(".topics").show();
});

<div class="course-content">
    <ul class="topics">
        <li class="data-list">Content not to Display</li>
    </ul>
    <div class="row">
        <p>There are no special blocks nearby</p>
    </div>
</div>

<div class="course-content">
    <h2 class="accesshide"></h2>
    <ul class="topics">
        <li class="data-list">Show because of the .accesshide block</li>
    </ul>
    <div class="row">
        <p>Case 1</p>
    </div>
</div>

<div class="course-content">
    <ul class="topics">
        <li class="data-list">Show because of the .single-section block</li>
    </ul>
    <div class="single-section">
        <p>Case 2</p>
    </div>
</div>

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