Question

我正在学习Vue.js，因为我正忙于一个项目。我一直在学习在线资源，以及MaximilianSchwarzmüller的Udemy课程，我强烈推荐。

我在为练习目的建立汉堡菜单时遇到了问题。我在div上添加/删除一个包含菜单内容的类。通过点击按钮（我的“汉堡包”）来添加/删除课程。

据我所知，通过我的课程和其他在线资源，包括一些好的StackOverflow问题，我所做的工作应该有效。

如果您发现任何问题，请告诉我，因为它在我的codepen中无效。在此先感谢=）

相关HTML：

<button v-on:click="isActive = !isActive" class="navigation-hamburger">
  <p>-<br>-<br>-</p>
</button>

<div class="menu-contain" v-bind:class="{ active: isActive}">
 <ul>
  <li><a href="#" class="links">Home</a></li>
  <li><a href="#" class="links">About</a></li>
  <li><a href="#" class="links">Contact</a></li>
 </ul>
</div>

CSS：

.menu-contain {
  width: 100%;
  height: 0px;
  background-color: #09333C;
  transition: all 0.5s linear;
}

.active {
  width: 100%;
  height: 300px;
  background-color: #8BAFB5;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s linear;
}

Vue js：

new Vue({
  el: '#wrap',
  data: {
    isActive: false
  }
});

这是codepen：

https://codepen.io/-Infamous/pen/KvXNJB

Answer 1

检查你的标记，有几个结束标记乱序。

<div id="wrap">
  <header id="navigation-top">
    <nav class="main-navigation">
      <!-- this is the button that toggles the class "active" -->
      <button v-on:click="isActive = !isActive" class="navigation-hamburger">
        <p>-<br>-<br>-</p>
      </button>
    </nav>
  </header>

  <!-- this is the div that needs to get the class "active" when the button is clicked -->
  <div class="menu-contain" v-bind:class="{ active: isActive}">
    <ul>
      <li><a href="#" class="links">Home</a></li>
      <li><a href="#" class="links">About</a></li>
      <li><a href="#" class="links">Contact</a></li>
    </ul>
  </div>
</div>

Vue JS切换按钮上的html div类点击不起作用

1 个答案: