CSS アコーディオンでページ遷移させたい

Question

HTML,CSSでアコーディオンページを作成しました。

画像の、「メニュー１」のボタンを押すと、そのまま画面遷移する仕様、
「メニュー２」を押すと、アコーディオンが開いて、下の「詳細内容に遷移」というボタンが現れ、これを押すと画面遷移する仕様、で作成しております。

上記の、「「メニュー１」のボタンを押すと、そのまま画面遷移する仕様」は、うまく動作するのですが、
「メニュー２」がうまく動きません。

一瞬遷移した画面が表示されるのですが、なぜかすぐ元の画面に戻ってしまいます。

遷移先指定をしているため、何がよくないのかわからず、恐れ入りますがご教示いただけますと幸いです。
どうぞよろしくお願いいたします。

<template>
  <div class="ac_menu">
    <label for="Panel1"
      ><v-btn depressed @click="moveToApplicability()"
        ><span>▶︎ メニュー１</span></v-btn
      ></label
    >

    <input type="checkbox" id="Panel1" class="on-off" />
    <div>
      <p>コンテンツが入ります。</p>
    </div>

    <label for="Panel2">▶︎ メニュー２</label>
    <input type="checkbox" id="Panel2" class="on-off" />
    <div>
      <li>
        <a href=""
          ><v-btn
            class="menu-btn"
            depressed
            @click="moveList()"
            ><span class="menu-arrow">▶︎ 詳細内容に遷移</span></v-btn
          ></a
        >
      </li>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  methods: {
    moveToApplicability() {
      this.$router.push('/quotation-request/applicability')
    },
    moveList() {
      this.$router.push('/store/list')
    },
  }
})
</script>

<style scoped>
.ac_menu {
  width: 300px;
}
.ac_menu label {
  background: #333;
  color: #fff;
  padding: 10px;
  display: block;
  margin: 0;
  border: 1px solid #fff;
  cursor: pointer;
}
.ac_menu input[type='checkbox'].on-off {
  display: none;
}

.ac_menu div {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  margin: 0;
  padding: 0 10px;
  list-style: none;
}
.ac_menu input[type='checkbox'].on-off + div {
  height: 0;
  overflow: hidden;
}
.ac_menu input[type='checkbox'].on-off:checked + div {
  height: 100px;
}
.menu-arrow {
  color: black;
}
</style>

Answer 1

<style>
.sub{display:none}
.sub:not(:checked) ~ ul{display:none};
</style>
<ul>
<li><a href="#1">メニュー１</a></li>
<li><input type="checkbox" class="sub" id="menu2"><label for="menu2">メニュー２</a></label>
<ul><li><a href="#2">詳細2</a></li></ul>
</li>
</li>
<li><input type="checkbox" class="sub" id="menu3"><label for="menu3">メニュー３</a></label>
<ul><li><a href="#3-1">詳細3-1</a></li></ul>
<ul><li><a href="#3-2">詳細3-2</a></li></ul>
</li>
</li>
</ul>

Comments

[pansuki]

ありがとうございます！

Answer 2

ボタンをhrefが空文字=現在のurlへの相対urlなaタグで囲ってるせいで、ボタンへのクリックイベントが親のaタグに伝播したタイミングでリロード(現在ページへの再アクセス)されてるんじゃないですか？
aタグをなくすか、aタグかv-btnのクリックイベント中にpreventDefaultなどでイベントの伝播を防ぐなどする必要があると思います

Comments

[pansuki]

aタグをなくすことで解決いたしました！ありがとうございます！