アコーディオンメニューがうまく動きません。

Question

お世話になります。
アコーディオンメニューを作成しましたが、うまく出来ないので、以下２点ご教示いただければと思います。
①現在作成したアコーディオンメニューですが、メニュー１をクリックすると、サブメニューはでてくるのですが、他のメニューも動いてしまいます。（サブメニュー自体は出てきませんが、背景が伸びてきます）メニュー１ならメニュー１のサブメニューだけ動いてほしいです。
②クリックからhoverに変更したいのですが、どこを書き換えたらよいかご教示ください。

宜しくお願い致します。

<ul class="menu">
    <li class="menu__item">
        <a class="menu__item__link js-menu__item__link" href="">メニュー1（クリックで開く）</a>
        <ul class="submenu">
            <li class="submenu__item">
                <a href="">サブメニュー1</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー2</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー3</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー4</a>
            </li>
        </ul>
    </li>
     <li class="menu__item">
        <a class="menu__item__link js-menu__item__link" href="">メニュー2（クリックで開く）</a>
        <ul class="submenu">
            <li class="submenu__item">
                <a href="">サブメニュー1</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー2</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー3</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー4</a>
            </li>
        </ul>
    </li>
     <li class="menu__item">
        <a class="menu__item__link js-menu__item__link" href="">メニュー3（クリックで開く）</a>
        <ul class="submenu">
            <li class="submenu__item">
                <a href="">サブメニュー1</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー2</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー3</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー4</a>
            </li>
        </ul>
    </li>
     <li class="menu__item">
        <a class="menu__item__link js-menu__item__link" href="">メニュー4（クリックで開く）</a>
        <ul class="submenu">
            <li class="submenu__item">
                <a href="">サブメニュー1</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー2</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー3</a>
            </li>
            <li class="submenu__item">
                <a href="">サブメニュー4</a>
            </li>
        </ul>
    </li>
</ul>

.menu{
    display: flex;
    justify-content:center;
}
.menu__item {
  background: #ccc;
  color: #000;
  cursor: pointer;
  display: block;
  margin-bottom: 1px;
  position: relative;
  list-style: none;
}
.menu__item a{
    color: #222;
    text-decoration: none; 
}
.menu__item__link {
  color: #fff;
  display: block;
  padding: 1rem;
}
.submenu {
  background: #fff;
  display: none;
}
.submenu__item {
  border-bottom: 1px solid #5200b7;
  color: #222;
  padding: 1rem;
  list-style: none;
}

@media(max-width:780px
.menu{
    display: block;
}
.menu_item {
  background: #5200b7;
  color: #fff;
  cursor: pointer;
  display: block;
  margin-bottom: 1px;
  position: relative;
}
.menu_item
.menu_item__link {
  color: #fff;
  display: block;
  padding: 1rem;
}
 
.submenu {
  background: #fff;
  display: none;
}
.submenu_item {
  border-bottom: 1px solid #5200b7;
  color: #222;
  padding: 1rem;
}

https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js

$(function(){
    $('.js-menu__item__link').each(function(){
        $(this).on('click',function(){
            $("+.submenu",this).slideToggle();
            return false;
        });
    });
});

Comments

[mai1210]

（1）のこの部分について、どういう状態が理想なのか、キャプチャ等で詳細ご説明いただくことはできますか？
「メニュー１をクリックすると、サブメニューはでてくるのですが、他のメニューも動いてしまいます。（サブメニュー自体は出てきませんが、背景が伸びてきます）メニュー１ならメニュー１のサブメニューだけ動いてほしいです。」

（2）については、js内の「click」を「mouseenter」に置き換えればそれっぽい動きにはなりますが、「閉じたい時にどうすれば良いか」「複数のメニューを同時に開ける状態にするかどうか」「スマホの場合は？」など、設計を考えることが必要になってくると思います。

また、cssのメディアクエリの記述が誤っているようなので、確認してください。

[yuko2430]

js内の「click」を「mouseenter」に置き換えたところ、hoverした時にメニューボックスが開きました。
mail1210様がおっしゃるように、次の問題が出てきますね。
①マウスがメニューから外れた時にメニューボックスが閉じるようにしたいです。
②モバイルの時はタップしたらメニューボックスが開く、もう一度タップしたら閉じるという形にしたいです。
知識もないため調べてもよくわかりませんでした。
ご教示いただけますでしょうか。

[yuko2430]

調べてたら以下の記述で上記①の問題が解決しました。

$(function() {
$('.menu__item').hover(function() {
$(".submenu:not(:animated)", this).slideDown();
}, function() {
$(".submenu", this).slideUp();
});
});

②のレスポンシブ時はちょっと難しいですね・・・

Answer 1

.menu__itemに色をつけてるからです。.menu__itemのbackgroundを削除し

.menu__item > a{
  background: #ccc;
}

としてください

$(function(){
  $(".submenu").hide();
  $('.js-menu__item__link').on('click',function(e){
    e.preventDefault();
    $("+.submenu",this).slideToggle();
  });
});

Comments

[yuko2430]

backgroundの指定が原因だったのですね。修正したら直りました。ありがとうございます。
JSですが、mai1210さんが提示していただいたように「click」を「mouseenter」に置き換えればhoverした時に開きますが、マウスをメニューからはなしたらサブメニューが閉じるようにしたいです。
ご教示いただけますと幸いです。宜しくお願い致します。

[yambejp]

例えば適当なmax-heightを設定してcssでアニメーションをするとか
.submenu {
max-height:0px;
transition:max-height 0.2s;
background: #fff;
}
.menu__item:hover > .submenu{
max-height:300px;
transition:max-height 0.5s;
}

[yuko2430]

調べてたら以下の記述で上記問題が解決しました。

$(function() {
$('.menu__item').hover(function() {
$(".submenu:not(:animated)", this).slideDown();
}, function() {
$(".submenu", this).slideUp();
});
});

しかし、モバイル版で、クリックするたびにメニューボックスが開く、閉じるとしたいのですが、ご教示いただけますでしょうか。

[yambejp]

PCではhover、モバイルではクリックということですか？
windowの幅をみてハックすると良いと思いますが

[yuko2430]

仰る通り、PCではhover、モバイルではクリックで実装したいです。
JSで「780px以下に対し」という記述がわかりません。無知ですみません・・・

[yambejp]

流れ的にはこう
<style>
#hoge{
background-Color:yellow;
}
#hoge.clicked{
background-Color:lime;
}
</style>
<script>
$(function(){
$('#hoge').on('click',function(){
if($(window).width()>780){
$(this).toggleClass('clicked');
}
}).on('mouseover mouseout',function(){
if($(window).width()<=780){
$(this).toggleClass('clicked');
}
});
});
</script>
<div id="hoge" style="">hoge</div>