动画按钮CSS

Question

$("button").click(function(){
  $("button").removeClass("selected");

  $(this).addClass("selected");

  var dataFilter = $(this).data('filter');

  if(dataFilter == "all") {
      $(".elements tr").show();
  }
  else
  {
    $(".elements tr").hide();
    $("." + dataFilter).show();
  }
});

我已经为单个按钮（SHOW ALL）创建了一个动画，但是效果还显示在第二个上，我还没有完成样式。这里的另一个问题是，当我单击第二个按钮（“自然”）时，第一个进入普通按钮。如何摆脱这种情况。

.selected{
  display: inline-block;
  border-radius: 3px;
  background-color: orange;
  border:none;
  color:white;
  text-align: center;
  font-size: 20px;
  padding:20px;
  width:200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.selected span{
  cursor: pointer;
  display: inline-block;
  position: absolute;
  transition: 0.5s
}
.selected span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.selected:hover span {
  padding-right: 25px;
}

.selected:hover span:after {
  opacity: 1;
  right: 0;
}

<div class="btn-group">
    <button class="selected" data-filter="all" style="vertical-align:middle"><span>Show All</span></button>
    <button data-filter="nature" class="btn2" style="margin-left:7px;" >NATURE</button>
    <!--<button data-filter="people" class="btn2" style="vertical-align:middle">PEOPLE</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">CITIES</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">MISS</button>-->
  </div>

提到的问题的屏幕截图] 3

Answer 1

由于您的代码无法重现您遇到的问题，因此很难确切说明正在发生的事情。但是我确实知道发生了什么。

您正在按类.selected选择全部显示按钮。当您选择“自然”按钮时，.selected类可能会从“显示全部”按钮中删除，并被应用于“自然”按钮。 （您可以通过使用浏览器开发者控制台检查按钮，并在单击它们时查看类是否更改，来进行检查。）

如果.selected类在按钮之间交替，则可以向“显示全部”按钮添加唯一的类，然后使用该类选择它。但是，如果您无法向“显示全部”按钮添加唯一的类，则可以选择唯一的data-filter属性。

[data-filter="all"] {
  display: inline-block;
  border-radius: 3px;
  background-color: orange;
  border:none;
  color:white;
  text-align: center;
  font-size: 20px;
  padding:20px;
  width:200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

[data-filter="all"] span{
  cursor: pointer;
  display: inline-block;
  position: absolute;
  transition: 0.5s
}
[data-filter="all"] span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

[data-filter="all"]:hover span {
  padding-right: 25px;
}

[data-filter="all"]:hover span:after {
  opacity: 1;
  right: 0;
}

<div class="btn-group">
    <button class="selected" data-filter="all" style="vertical-align:middle"><span>Show All</span></button>
    <button data-filter="nature" class="btn2" style="margin-left:7px;" >NATURE</button>
    <!--<button data-filter="people" class="btn2" style="vertical-align:middle">PEOPLE</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">CITIES</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">MISS</button>-->
  </div>