如何在交互式jQuery类别过滤器中修复CSS问题

我创建了一个交互式jQuery类别过滤器，但是如果我选择任何选项，搜索结果页面显示了我之间的内容。就像一个内容与下一个内容之间有很多距离。

$(document).ready(function() {
  $(".catagory_buttton").click(function() {
    var catagory = $(this).attr('id');
    //alert(catagory);
    if (catagory == 'girl') {
      $('.human_class').addClass('hide');
      setTimeout(function() {
        $('.' + catagory).removeClass('hide');
      }, 300);
    }
    if (catagory == 'boy') {
      $('.human_class').addClass('hide');
      setTimeout(function() {
        $('.' + catagory).removeClass('hide');
      }, 300);
    }
  });
});

.catagory_container {
  width: 800px;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
.catagory_buttton {
  float: left;
  width: 50%;
}
.catagory_buttton:hover {
  background-color: black;
  color: white;
}
.hide {
  transform: scale(0);
  width: 0;
  padding: 0;
  transition: all 0.4 ease.in.out;
}
.human_class {
  float: left;
  margin: 0 auto;
}

<html>
<head>
  <title>test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div class="catagory_container">
    <p class="catagory_buttton" id="girl">Girl</p>
    <p class="catagory_buttton" id="boy">Boys</p>
  </div>
  <div class=".containerItem">
    <p class="human_class boy"><span>nawaz</span></p>
    <br>
    <p class="human_class girl"><span>Aysha</span></p>
    <br>
    <p class="human_class girl"><span>fatime</span></p>
  </div>
</body>
</html>

如果我正确理解您，将clear:both给.human_class并删除<br>标签并将.hide更改为

.hide {
  display:none;
}

将解决问题，您可以在下面的片段中检查它

$(document).ready(function() {
  $(".catagory_buttton").click(function() {
    var catagory = $(this).attr('id');
    //alert(catagory);
    if (catagory == 'girl') {
      $('.human_class').addClass('hide');
      setTimeout(function() {
        $('.' + catagory).removeClass('hide');
      }, 300);
    }
    if (catagory == 'boy') {
      $('.human_class').addClass('hide');
      setTimeout(function() {
        $('.' + catagory).removeClass('hide');
      }, 300);
    }
  });
});

.catagory_container {
  width: 800px;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
.catagory_buttton {
  float: left;
  width: 50%;
  margin:0;
}
.catagory_buttton:hover {
  background-color: black;
  color: white;
  margin:0;
}
.hide {
  display:none;
}
.human_class {
  float: left;
  margin: 0 auto;
  clear:both
}

<html>
<head>
  <title>test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div class="catagory_container">
    <p class="catagory_buttton" id="girl">Girl</p>
    <p class="catagory_buttton" id="boy">Boys</p>
  </div>
  <div class=".containerItem">
    <p class="human_class boy"><span>nawaz</span></p>
    <p class="human_class girl"><span>Aysha</span></p>
    <p class="human_class girl"><span>fatime</span></p>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：