单击按钮更改方向

如何解决单击按钮更改方向

我试图创建一个动画效果，当我单击两个按钮时会移动它们。我将flex方向设置为容器div中的一列，当我单击其中一个时（可能带有1s动画），我实质上只是希望它们定位为flex行。当我单击它们时，目前没有任何反应。这是我的代码示例：

HTML

<header>
  <div class="container">
  <h1>Choose Your Allegiance</h1>
  <div id="buttons">
    <button class="fill"><img src="/assets/Jedi.png" alt="Jedi" /></button>
    <button class="fill sith">
      <img src="/assets/Sith.png" alt="Sith" />
    </div>
    </button>
  </div>
</header>

CSS

.container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container.click {
  flex-direction: row;
  justify-content: space-around;
}

h1 {
  margin-left: 5vw;
  color: black;
  font-family: "Poller One",cursive;
  font-variant: small-caps;
  font-size: 3rem;
  margin-top: 6vh;
}

button {
  color: white;
  transition: 0.25s;
  float: left;
  margin: 2%;
}

button:hover,button:focus {
  border: 2px solid red;
  color: black;
}

.fill {
  height: 120px;
  width: 150px;
  background: transparent;
  margin-top: 4vh;
  outline: none;
  border: none;
}

.fill:hover,.fill:focus {
  box-shadow: inset 0 0 0 4.5em #add8e6;
}

.sith:hover,.sith:focus {
  box-shadow: inset 0 0 0 4.5em black;
}

#buttons {
  height: 100%;
  width: 100vw;
  padding-top: 10vh;
  display: flex;
  justify-content: center;
}

JS

document.querySelector("button").addEventListener("click",() => {
  document.querySelector(".container").classList.toggle(".container.click");
});

解决方法

您使用的classList.toggle错误。您需要执行以下操作：

const container = document.querySelector(".container");
container.classList.toggle("click");

Documentation on Element.classList here。

,

要使其正常工作，您需要进行一些更改：

1。 document.querySelector("button")仅选择第一个按钮。您可以为按钮添加2个事件监听器

1. 使用document.querySelectorAll("button")获取所有按钮，然后可以遍历它们，向每个按钮添加一个事件侦听器：

    document.querySelectorAll("button").forEach(function(button) {
        button.addEventListener("click",() => {
            document.querySelector(".container").classList.toggle("click");
      });
    });

1. 更好的方法是将事件侦听器添加到buttons容器中-您可以使用getElementById获取元素，然后将侦听器添加到其中：

var buttons = document.getElementById("buttons");
buttons.addEventListener("click",(e) => {
    document.querySelector(".container").classList.toggle("click");
});

2。您只需在将类传递到toggle 时使用类名，就不需要.。另外，您只需切换click类，因为container类将始终适用。因此，您需要使用.toggle("click");

工作示例（不包含图片）：

var buttons = document.getElementById("buttons");
buttons.addEventListener("click",(e) => {
    document.querySelector(".container").classList.toggle("click");
});

.container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container.click {
  flex-direction: row;
  justify-content: space-around;
}

h1 {
  margin-left: 5vw;
  color: black;
  font-family: "Poller One",cursive;
  font-variant: small-caps;
  font-size: 3rem;
  margin-top: 6vh;
}

button {
  color: red;
  transition: 0.25s;
  float: left;
  margin: 2%;
}

button:hover,button:focus {
  border: 2px solid red;
  color: black;
}

.fill {
  height: 120px;
  width: 150px;
  background: transparent;
  margin-top: 4vh;
  outline: none;
  border: none;
}

.fill:hover,.fill:focus {
  box-shadow: inset 0 0 0 4.5em #add8e6;
}

.sith:hover,.sith:focus {
  box-shadow: inset 0 0 0 4.5em black;
}

#buttons {
  height: 100%;
  width: 100vw;
  padding-top: 10vh;
  display: flex;
  justify-content: center;
}

<header>
  <div class="container">
    <h1>Choose Your Allegiance</h1>
    <div id="buttons">
      <button class="fill">Jedi</button>
      <button class="fill sith">Sith</button>
    </div>
  </div>
</header>

不幸的是，CSS animations cannot be applied to flexbox direction property是为推动这一变化而动。