多个van-dropdown-item布局，相互覆盖无法点击

 wxml：

<van-dropdown-menu active-color="#E5A06D">
      <van-dropdown-item title="价格区间" id="price" style="display: {{ priceShow ? 'block' : 'none' }};"  value="{{ priceVal }}" data-reset="1" options="{{ priceOptions }}" bind:close="priceCloce" bind:open="priceOpen" bind:change="changePrice" />
      <van-dropdown-item id="classify" style="display: {{ classShow ? 'block' : 'none' }};" value="{{ classifyVal }}" bind:close="classClose" bind:open="classOpen" data-reset="1" title="商品分类" options="{{ classifyOptions }}" bind:change="changeClassify" />
    </van-dropdown-menu>

js：

data: {
    priceShow: false,
    classShow: false
}, 
priceClose() {
        this.setData({ priceShow: false })
    },
    classClose() {
        this.setData({ classShow: false })
    },

    priceOpen() {
        this.setData({ priceShow: true })
    },
    classOpen() {
        this.setData({ classShow: true })
    },

 使用vant的van-dropdown-menu组件时会存在多个van-dropdown-item遮挡导致无法点击的情况。解决方法：

设置变量将item隐藏，每次触发打开事件时显示，触发关闭事件时隐藏。

所需样式：style="display: {{ priceShow ? 'block' : 'none' }};"

参考链接：多个van-dropdown-item布局，相互覆盖无法点击 - 简书