代码之家 › 专栏 › 技术社区 › binoculars

检查是否所有子元素都有display:none

css html jquery

binoculars · 技术社区 · 7 年前

我正在寻找一种方法来确定 #container 有 display:none I can't use :visible 因为 container 它本身是一个隐藏的面板,可以打开(使其可见)和关闭(再次隐藏)。

不同的子div在代码的其他部分中单独显示和关闭。

我试过:

function check_if_all_divs_are_hidden()
{
    if($('#container').children().css('display') == 'none') {
      //hide text
    }
    else
    {
      //show text
    }
}

但那不管用,因为如果一个div有 显示:无 属性,它将隐藏文本,而只有当所有div都具有此属性时,它才应隐藏文本。

7 回复 | 直到 7 年前

Abin Thaha 7 年前

看看这个。

$('.check-btn').on('click', function() {
  if($('.item').length === $('.hidden').length)   {
    //hide text
    console.log('same');
  } else {
    //Show Text
    console.log('different');
  }
})

.item {
  display: inline-block;
  width: 300px;'
  height: 300px;
  border: 1px solid #ddd;
  text-align: center
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='#container'>
  <span class='item hidden'>1</span>
  <span class='item hidden'>2</span>
  <span class='item hidden'>3</span>
  <span class='item'>4</span>
  <span class='item hidden'>5</span>
  <span class='item hidden'>6</span>
</div>

<button class='check-btn'>Check</button>

user8517929 user8517929 7 年前

$(document).ready(function(){
  $('.toggle').on('click', function() {
    if($(this).next('.content').hasClass('active')){
      $(this).text('Show');
      $(this).next('.content').removeClass('active');
    }else{
      $(this).text('Hide');
      $(this).next('.content').addClass('active');
    }
  });
});

.content{
  display:none;
}

.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='#container'>
  <span class='item'>1</span>
  <button type="button" class="toggle">Show</button>
  <div class="content">Some 1</div>
  <hr>
  <span class='item'>2</span>
  <button type="button" class="toggle">Show</button>
  <div class="content">Some 2</div>
  <hr>
  <span class='item'>3</span>
  <button type="button" class="toggle">Show</button>
  <div class="content">Some 3</div>
</div>

你也可以用这样的东西:D

Guillaume 7 年前

你可以试试这个:

function check_if_all_divs_are_hidden()
{
    // Hide text
    $('#container').children().each((idx,elt)=>{
        if($(elt).children().css('display') != 'none') {
           //show text
        }
    })
}

这样,如果所有子项都被隐藏,它将隐藏文本;如果至少有一个子项可见,它将显示文本

Sheruan Bashar 7 年前

     var childrenState = {};
        function open() {
            childrenState[id] = true;
        }

for (var i in childrenState) {
    if (childrenState[i]) {
       showText();
    }
}

binoculars 7 年前

我改变了 minitauros' answer 一点点,找到了一个可行的解决方案:

function check_if_all_are_hidden()
{
    all_are_hidden = true;
    $("#container").children().each(function(){
        if($(this).css('display') !== 'none')
        {
            all_are_hidden = false;
            return false;
        }
    });

    if (all_are_hidden) {
        console.log("all hidden");
    } else {
        console.log("some are open");
    }
}

除非有人找到更好的方法,否则将在2天内将此标记为正确答案。

minitauros 7 年前

function check_if_all_divs_are_hidden() {
  let all_are_hidden = true;

  $('#container').children().each(child => {
    if ($(child).css('display') !== 'hidden') {
      all_are_hidden = false;
      return false; // Break as we've found one child that isn't hidden, which means not all are hidden.
    }
  });

  if (all_are_hidden) {

  } else {

  }
}

-1

stalinrajindian 7 年前

请尝试下面的代码。

 $('#container >div').each(function(){ 
          if($(this).css('display') == 'none') {
              //hide text
            }
            else
            {
              //show text
            }
     });