скрыть .card-body, когда у детей есть «display: none» - PullRequest
Новая
       9

скрыть .card-body, когда у детей есть «display: none»

0 голосов
/ 11 февраля 2020

У меня две карты с коллапсом.

Когда пользователь clicks на букве в нумерации страниц, я хочу, чтобы .card-body адаптировал display:none, если нет divs, который будет показан в карта. В противном случае всегда есть какой-нибудь пустой пробел под card-header.

* .card-body - это .parent() из $('#Categories > .acc-row')

На данный момент я могу только скрыть все карточные тела, ни один из них или только первый. Ниже приведен фрагмент всего моего кода. А вот ссылка на скрипку

Вот фрагменты того, над чем я работал последние несколько часов (ни один из фрагментов не работает правильно). 

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();
           }


$(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 голос
/ 11 февраля 2020

Вы можете выполнять итерацию по каждому телу карты, чтобы контролировать, видна ли каждая строка или нет. Таким образом, можно скрыть тело карты, если div не виден.

Весь код: 

$(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)
    });
  });

});

Кроме того, у вас не должно быть более одного идентичного атрибута id на та же страница Поэтому я рекомендую вам удалить или изменить идентификатор #Categories.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...