堆栈内存溢出
  简体   繁体   English

当孩子有“显示：无”时隐藏 .card-body

[英]hide .card-body when childrens has "display:none"

 原文  2020-02-11 15:28:16  0   1    javascript/ jquery/ html/ bootstrap-4

问题描述

I have two cards with collapse.我有两张折叠卡。

When the user clicks on a letter in the pagination I want the .card-body to adapt display:none if there are no divs to be shown in the card.当用户clicks分页中的字母时，我希望.card-body适应display:none如果卡片中没有要显示的divs 。 Otherwise there is always some empty white space below the card-header .否则card-header下方总会有一些空白区域。

the .card-body is the .parent() of $('#Categories > .acc-row')在.card-body是.parent()的$('#Categories > .acc-row')

For now I'm only able to either hide all card-bodies,none of them or just the first one.现在我只能隐藏所有卡体，没有或只有第一个。 Below is a snippet to my whole code.下面是我整个代码的片段。 And here is a link to a fiddle这是一个小提琴的链接

Here are snippets of what I've been working on for the last few hours ( none of the snippets works correctly).以下是我过去几个小时一直在做的工作的片段（没有一个片段可以正常工作）。

var toHide = $('div.acc-row');
   if(toHide.filter(':visible').length == 0){
     $('.collapse').collapse("hide");
   }

Another其他

if ($('#Categories > .acc-row').is(":visible")) {
           $('#Categories > .acc-row').parent().show();
            }else{
           $('#Categories > .acc-row').parent().hide();
           }

And another而另一个

 $('#Categories > .acc-row').each(function(){
     if ($(this).is(":visible")) {
        $(this).parent().show();
         }else{
        $(this).parent().hide();
        } 
      });

And here is my latest approach这是我的最新方法

   if ($('#Categories > .acc-row:hidden')) {
             $('#Categories > .acc-row').parent().show();
           }else{
             $('#Categories > .acc-row').parent().hide();
           }


 $(document).ready(function(){ $("#alphf .acco").each(function(){ $(this).on("click", function(){ $('.collapse').collapse("show"); var cat = $(this).data('cat-type'); var nam = $(this).data('cat-name'); if (cat != 0) { $('#Categories > .acc-row').hide(); //$('#Categories > .acc-row:hidden').parent().hide(); $('#Categories > .acc-row[data-cat-type="'+cat+'"][data-cat-name="'+nam+'"]').show(); } //var toHide = $('div.acc-row'); // if(toHide.filter(':visible').length == 0){ // $('.collapse').collapse("hide"); // } // if ($('#Categories > .acc-row').is(":visible")) { // $('#Categories > .acc-row').parent().show(); // }else{ // $('#Categories > .acc-row').parent().hide(); // } // $('#Categories > .acc-row').each(function(){ // if ($(this).is(":visible")) { // $(this).parent().show(); // }else{ // $(this).parent().hide(); // } // // }); if ($('#Categories > .acc-row:hidden')) { $('#Categories > .acc-row').parent().show(); }else{ $('#Categories > .acc-row').parent().hide(); } }); }); $("#search").on("keyup", function(e) { //$('button').removeClass('collapsed'); $('#collapseOne, #collapseTwo').removeClass('collapse'); var value = $(this).val().toLowerCase(); $('.acc-row').filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/accordion_css.css"> <script src="js/jquery_3.4.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/popover.min.js"></script> <script src="js/accordionFilter.js"></script> <script src="js/scripts.js"></script> <title>Accordion filter</title> </head> <body> <div class="container"> <nav> <ul class="pagination" id="alphf"> <!-- <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> --> <li><a class="acco" href="#" data-cat-name="A" data-cat-type="A">A</a></li> <li><a class="acco" href="#" data-cat-name="B" data-cat-type="B">B</a></li> <li><a class="acco" href="#" data-cat-name="C" data-cat-type="C">C</a></li> <li><a class="acco" href="#" data-cat-name="D" data-cat-type="D">D</a></li> <li><a class="acco" href="#" data-cat-name="E" data-cat-type="E">E</a></li> <li><a class="acco" href="#" data-cat-name="F" data-cat-type="F">F</a></li> <li><a class="acco" href="#" data-cat-name="G" data-cat-type="G">G</a></li> <li><a class="acco" href="#" data-cat-name="H" data-cat-type="H">H</a></li> <li><a class="acco" href="#" data-cat-name="I" data-cat-type="I">I</a></li> <li><a class="acco" href="#" data-cat-name="J" data-cat-type="J">J</a></li> <li><a class="acco" href="#" data-cat-name="K" data-cat-type="K">K</a></li> <li><a class="acco" href="#" data-cat-name="L" data-cat-type="L">L</a></li> <li><a class="acco" href="#" data-cat-name="M" data-cat-type="M">M</a></li> <li><a class="acco" href="#" data-cat-name="N" data-cat-type="N">N</a></li> <li><a class="acco" href="#" data-cat-name="O" data-cat-type="O">O</a></li> <li><a class="acco" href="#" data-cat-name="P" data-cat-type="P">P</a></li> <li><a class="acco" href="#" data-cat-name="R" data-cat-type="R">R</a></li> <li><a class="acco" href="#" data-cat-name="S" data-cat-type="S">S</a></li> <li><a class="acco" href="#" data-cat-name="T" data-cat-type="T">T</a></li> <li><a class="acco" href="#" data-cat-name="U" data-cat-type="U">U</a></li> <li><a class="acco" href="#" data-cat-name="V" data-cat-type="V">V</a></li> <li><a class="acco" href="#" data-cat-name="X" data-cat-type="X">X</a></li> <li><a class="acco" href="#" data-cat-name="Y" data-cat-type="Y">Y</a></li> <li><a class="acco" href="#" data-cat-name="Z" data-cat-type="Z">Z</a></li> <!-- <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> --> </ul> </nav> <div class="accordion accordian-wrapper" id="accordionStaff"> Search: <input id="search" type="text"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <h5 class="accordian-title"> Department one </h5> </button> </h2> </div> <div id="name-cats"> <div id="collapseOne" class="collapse" aria-labelledby="headingOne"> <div class="card-body" id="Categories"> <div class="row acc-row" data-cat-type="A" data-cat-name="A"> <div class="col-md-3"> <p>Aston</p> </div> <div class="col-md-4"> <p>Tracker</p> </div> <div class="col-md-3"> <p>aston@some.com </p> </div> <div class="col-md-2"> <p>Phone:: 1234567890</p> </div> </div> <div class="row acc-row" data-cat-type="A" data-cat-name="A"> <div class="col-md-3"> <p data-cat-type="A">Arleen</p> </div> <div class="col-md-4"> <p>Specialist</p> </div> <div class="col-md-3"> <p>arleen@firm.is</p> </div> <div class="col-md-2"> <p>phone 1239484999</p> </div> </div> <div class="row acc-row" data-cat-type="J" data-cat-name="J"> <div class="col-md-3"> <p data-cat-type="J">John</p> </div> <div class="col-md-4"> <p>Registar</p> </div> <div class="col-md-3"> <p>jj@arn.com </p> </div> <div class="col-md-2"> <p> 1234565469</p> </div> </div> <div class="row acc-row" data-cat-type="K" data-cat-name="K"> <div class="col-md-3"> <p data-cat-type="K">Kyle </p> </div> <div class="col-md-4"> <p>Driver </p> </div> <div class="col-md-3"> <p>kdrive@company.com </p> </div> <div class="col-md-2"> <p> 1234567890 </p> </div> </div> </div> </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> <h5 class="accordian-title"> DepartmentTwo</h5> </button> </h2> </div> <div id="name-cats"> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"> <div class="card-body" id="Categories"> <div class="row acc-row" data-cat-type="A" data-cat-name="A"> <div class="col-md-3"> <p id="staff_name" data-cat-type="A">Allan</p> </div> <div class="col-md-4"> <p>Specialist</p> </div> <div class="col-md-3"> <p>allan@lsome.com </p> </div> <div class="col-md-2"> <p>Phone: 1234567890</p> </div> </div> <div class="row acc-row" data-cat-type="B" data-cat-name="B"> <div class="col-md-3"> <p id="staff_name" data-cat-type="B">Brad</p> </div> <div class="col-md-4"> <p>IT-Guy</p> </div> <div class="col-md-3"> <p>brad@some.com </p> </div> <div class="col-md-2"> <p> 1234567890 </p> </div> </div> <div class="row acc-row" data-cat-type="B" data-cat-name="B"> <div class="col-md-3"> <p>Brent</p> </div> <div class="col-md-4"> <p>Specialist</p> </div> <div class="col-md-3"> <p>brent@some.com </p> </div> <div class="col-md-2"> <p>123456789</p> </div> </div> <div class="row acc-row" data-cat-type="E" data-cat-name="E"> <div class="col-md-3"> <p>Evan</p> </div> <div class="col-md-4"> <p>Chef</p> </div> <div class="col-md-3"> <p>evan@some.com </p> </div> <div class="col-md-2"> <p>123456789</p> </div> </div> </div> </div> </div><!-- Filter --> </div> </div> </div><!--container --> </body> </html>

1 个解决方案

解决方案1
 1 已采纳  2020-02-11 17:24:20

You can iterate over each card body to control whether each row is visible or not.您可以遍历每个卡片主体以控制每一行是否可见。 Thus, it is possible to hide the card body if no div is visible.因此，如果没有 div 可见，则可以隐藏卡片主体。

The whole code:整个代码：

$(document).ready(function() {
  $("#alphf .acco").each(function() {

    $(this).on("click", function() {
      $('.collapse').collapse("show");

      var cat = $(this).data('cat-type');
      var nam = $(this).data('cat-name');

      // modified from here down
      if (cat != 0) {
        $('.card-body').each(function(i, cardBody) {
          var hidebody = true;
          ($(cardBody.children)).each(function(f, accRow) {
            $(accRow).hide();
            if ($(accRow).data('catType') == cat && $(accRow).data('catName') == nam) {
              hidebody = false;
              $(accRow).show();
            }
          });
          if (hidebody) {
            $(cardBody).hide();
          } else {
            $(cardBody).show();
          }
        });
      }
      // modified from here up

    });

  });

  $("#search").on("keyup", function(e) {
    $('#collapseOne, #collapseTwo').removeClass('collapse');
    var value = $(this).val().toLowerCase();
    $('.acc-row').filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

});

In addition, you must not have more than one same id attribute on the same page.此外，同一页面上不能有多个相同的 id 属性。 So I recommend you to remove or modify the id #Categories .因此，我建议您删除或修改 id #Categories 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 悬停卡体文本时如何将卡体中的文本向左滚动 - How to scroll text within a card body to left when hovering the card-body text 如何使用 jQuery 在引导程序 4 中将 slideDown() 功能添加到卡体 - how to add slideDown() feature to card-body in bootstrap 4 using jQuery 将div对准Bootstrap4卡体的底部 - Align div to bottom of Bootstrap4 card-body 孩子不显示时隐藏父母 - Hide parent when child got display none Vuetify扩展面板主体在测试环境中没有显示任何样式 - Vuetify expansion panel body has display none style in testing environment 当div显示时停止setInterval：none - Stop setInterval when div has display:none 显示时如何隐藏元素：none 不起作用 - How to hide an element when display: none doesn't work 当所有子项都不显示时如何隐藏上层div - how to hide the upper div when all children are display none 隐藏Div：“ display：none”属性 - Hide a Div: “display:none” property 当元素具有属性display：none时，忽略视图验证 - Ignore view validation when element has attributes `display: none`
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM