动画按钮 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();
  }
});

我为单个按钮创建了一个动画（显示全部），但效果也显示在第二个，我还没有完成样式。这里的另一个问题是当我单击第二个按钮（自然）时，第一个按钮会变成普通按钮。如何摆脱这种情况。

.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 的“全部显示”按钮。当您选择 Nature 按钮时，.selected 类可能会从 Show All 按钮中删除并应用于 Nature 按钮。 （您可以通过使用浏览器开发者控制台检查按钮来检查这一点，并查看当您单击它们时类是否发生变化）

如果.selected 类在按钮之间交替出现，您可以将唯一的类添加到“显示全部”按钮并使用该类选择它。但是，如果您无法向 Show All 按钮添加唯一的类，则可以选择唯一的 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>