Question

如果没有课程active，我需要隐藏课程。

＆＃13;

$(document).ready(function() {
  
  if (!$('.active').hasClass('active')) {
    $(this).hide();
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="subheader active">
  <p>Hello</p>
</div>
<div class="subheader">
  <p>Goodbye</p>
</div>
<div class="subheader">
  <p>Hello Again</p>
</div>

＆＃13;

Answer 1

要隐藏没有课程subheader的{{1}}，请使用

active

我认为，更好的解决方案是使用纯CSS：

$('.subheader:not(.active)').hide();

正如本片段所示，只使用jQuery来切换类，并使用CSS来直观地决定它会发生什么。

＆＃13;

.subheader {
  display: none;
}
.subheader.active {
  display: block;
}

＆＃13;

$('.subheader').on('click', function(){
    $('.subheader').toggleClass('active');
  });

＆＃13;

.subheader {
  display: none;
}
.subheader.active {
   display: block; 
}

＆＃13;

Answer 2

＆＃13;

$(function() {
    $('.subheader:not(.active)').hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="subheader active">
  <p>Hello</p>
</div>
<div class="subheader">
  <p>Goodbye</p>
</div>
<div class="subheader">
  <p>Hello Again</p>
</div>

＆＃13;

或者，用css：

＆＃13;

.subheader{ display: none; }
.subheader.active{ display: block; }

＆＃13;

<div class="subheader active">
  <p>Hello</p>
</div>
<div class="subheader">
  <p>Goodbye</p>
</div>
<div class="subheader">
  <p>Hello Again</p>
</div>

＆＃13;

Answer 3

使用下面的代码隐藏带有子标题类的div：

$('.subheader:not(.active)').hide();

隐藏div，如果它没有某个类

3 个答案: