基于子类隐藏内容

Question

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

-第一街区分区--

<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子选择器(>)是很简单的。只需找到作为accesshide子元素的course-content的元素集合，并隐藏其父元素的topics子元素。

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

MDN儿童组合医生。

​

$(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代码，只需要带有邻接或一般信息兄弟组合器的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()方法。如果需要显示.topics块(如果附近有.accesshide块或.single-section块)，则可以对这两种情况使用此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>

​