jQueryで、クリックしたときに連動してスライドするナビゲーションを作りたいです

前提・実現したいこと

閲覧ありがとうございます。

下記を満たすようなスライドするナビゲーションを作りたいです。
0. クリックしたアイテムが左にスライドする
0. スライド済みのアイテムをクリックすると、そのアイテムは閉じる
0. アイテムがスライド済みのときに他のアイテムをクリックすると、
スライド済みのアイテムは閉じてクリックしたアイテムのみスライドする。
0. 各アイテムはスライドする幅が違う

発生している問題・エラーメッセージ

上記3番めの仕組みについて、
下記の画像のような動作を実現したいのですが、
どのように条件付をすればよいかが分かりません。

よろしくお願いいたします。

該当のソースコード

HTML
1<div class="gnav">
2  <ul>
3    <li class="gnav-item-1"></li>
4    <li class="gnav-item-2"></li>
5    <li class="gnav-item-3"></li>
6    <li class="gnav-item-4"></li>
7  </ul>
8</div><!-- /gnav -->

CSS
1.gnav ul {
2  display: flex;
3  align-items: center;
4  justify-content: flex-end;
5｝

jQuery
1$(function () {
2  $(".gnav-item-1").on("click", function () {
3    if ($(".gnav-item-1 ").css("margin-right") == "0px") {
4      $(".gnav-item-1").stop().animate({ marginRight: "230px" }, 500);
5    } else {
6      $(".gnav-item-1").stop().animate({ marginRight: "0px" }, 500);
7    }
8  });
9
10  $(".gnav-item-2").on("click", function () {
11    if ($(".gnav-item-2 p").css("margin-right") == "0px") {
12      $(".gnav-item-1, .gnav-item-2")
13        .stop()
14        .animate({ marginRight: "150px" }, 500);
15    } else {
16      $(".gnav-item-1, .gnav-item-2")
17        .stop()
18        .animate({ marginRight: "0" }, 500);
19    }
20  });
21
22  $(".gnav-item-3").on("click", function () {
23    if ($(".gnav-item-3").css("margin-right") == "0px") {
24      $(".gnav-item-2, .gnav-item-3")
25        .stop()
26        .animate({ marginRight: "190px" }, 500);
27    } else {
28      $(".gnav-item-2, .gnav-item-3")
29        .stop()
30        .animate({ marginRight: "0" }, 500);
31    }
32  });
33
34  $(".gnav-item-4").on("click", function () {
35    if ($(".gnav-item-4 p").css("margin-right") == "0px") {
36      $(".gnav-item-3, .gnav-item-4")
37        .stop()
38        .animate({ marginRight: "115px" }, 500);
39    } else {
40      $(".gnav-item-3, .gnav-item-4")
41        .stop()
42        .animate({ marginRight: "0" }, 500);
43    }
44  });
45});

yambejp

2020/09/14 03:38

手書きでいいので画像で具体的なイメージを例示できませんか？

退会済みユーザー

2020/09/14 03:55

閲覧ありがとうございます。情報不足ですみません。画像を追加しましたので、ご確認をお願いいたします。

yambejp

2020/09/14 04:08

2→３の挙動は、緑だけ移動ではなく、一旦赤・青が右にもどってから、３つで移動で間違いないですね？

退会済みユーザー

2020/09/14 04:11

はい、その挙動で間違いありません。

行動規範の内容に同意します

回答2件

ベストアンサー

アニメーションはCSSのアニメーションを使って、jQuery はクラスの追加、削除のみにするのが、シンプルだし、また、jQueryのアニメーションより軽いです。

css
1.gnav ul {
2  display: flex;
3  align-items: center;
4  justify-content: flex-end;
5  list-style: none;
6}
7.gnav ul li {
8  margin-right: 0px;
9  transition: margin-right .5s;
10}
11.gnav-item-1.move {
12  margin-right: 230px;
13}
14.gnav-item-2.move {
15  margin-right: 150px;
16}
17.gnav-item-3.move {
18  margin-right: 190px;
19}
20.gnav-item-4.move {
21  margin-right: 115px;
22}

jS
1$(function () {
2  $(".gnav ul li").click(function () {
3    
4    //クリックしたli以外の全てのmoveを削除
5    $(".gnav ul li").not(this).removeClass("move");
6    
7    //クリックしたliのmoveをトグル
8    $(this).toggleClass("move");
9  });
10});