javascript 如何在点击菜单项后关闭下拉菜单

w7t8yxp5 于 2023-01-08 发布在 Java

关注(0)|答案(3)|浏览(168)

我有一个使用NUXT JS和tailwind CSS的下拉菜单，但nuxt-js的问题是，因为它不使用SSR更改页面，所以下拉菜单不关闭我如何在单击菜单项时关闭下拉菜单
这是模板

<!-- dropdown -->
      <button class="mt-1 block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800 sm:mt-0 sm:ml-2"
        type="button" v-on:click="toggleDropdown()" ref="btnDropdownRef">
        Applications
      </button>
      <div v-bind:class="{'hidden': !dropdownPopoverShow, 'block': dropdownPopoverShow}"
        class="bg-gray-800 w-full md:w-1/5 text-white z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
         ref="popoverDropdownRef">
        <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/applications/education">
        education
        </NuxtLink>
        <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/applications/lifescience">
        life sciences 
        </NuxtLink>
        <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/applications/education">
        media
        </NuxtLink>
        <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/">
        industries
        </NuxtLink>
        <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/">
        agriculture
        </NuxtLink>
      </div>

这是剧本

<script>
  import {
    createPopper
  } from "@popperjs/core";

  export default {
    data() {
      return {
        isOpen: false,
        dropdownPopoverShow: false,
      }
    },
    methods: {
      toggleDropdown: function () {
        if (this.dropdownPopoverShow) {
          this.dropdownPopoverShow = false;
        } else {
          this.dropdownPopoverShow = true;
          createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
            placement: "bottom-start"
          });
        }
      }
    }
  }
</script>

JavaScript

来源：https://stackoverflow.com/questions/66845119/how-to-close-dropdown-after-clicking-on-menu-item

3条答案

按热度按时间

j5fpnvbx1#

我最终使用了监视路径方法

watch: {
    '$route' () {
      // this will close the dropdown
      this.dropdownPopoverShow = false,  
      // this will close the mobile menu on page change
      this.isOpen = false
    }

赞(0）回复(0）举报 2023-01-08

z6psavjg2#

您可以使用Vue路由器示例上的afterEach钩子设置一个方法，使其在每次页面更改时运行，我建议将其设置为Nuxt中的插件，并将dropdownPopoverShow从您的nav组件移到存储中。
将dropdownPopoverShow移到存储中，以便可以在nav组件之外引用它。

export const state = () => ({
  dropdownPopoverShow: false
})

export const mutations = {
  toggleDropdown(state) {
    // no need for an 'if/then', just toggle the Boolean
    state.dropdownPopoverShow = !state.dropdownPopoverShow
  },
  hideDropdown(state) {
    state.dropdownPopoverShow = false
  }
}

在你的导航组件里，调用商店里的变异。

methods: {
  toggleDropdown() {
    this.$store.commit('toggleDropdown')
  }
}

最后，创建一个插件，在每次路由更改后将dropdownPopoverShow设置为false。

// plugins/hideDropdown.js:
export default async ({ app, store }) => {
  app.router.afterEach((to, from) => {
    store.commit('hideDropdown')
  });
}

记得将插件添加到您的nuxt配置中：

plugins: [ { src: '~/plugins/hideDropdown.js', mode: 'client' } ]

赞(0）回复(0）举报 2023-01-08

wfsdck303#

用于组合物API

const route = useRoute();

watch(route, () => {
  this.dropdownPopoverShow = false, 
  this.isOpen = false
});

对于选项API

watch: {
  '$route' () {
  this.dropdownPopoverShow = false,  
  this.isOpen = false
}

赞(0）回复(0）举报 2023-01-08

我来回答

javascript 如何在点击菜单项后关闭下拉菜单

3条答案

相关问题

热门标签

最新问答