Q&A
1. これを
$(".slider").toggle('slide', { direction: 'down' });
こうして
$(".slider").toggle('slide', { direction: 'up' });
動作あってる？
前提・実現したいこと
１、メニューを開いてから閉じた際に下にある要素が開いていたメニュー分上に動く
→下の要素が詰まるのではなく、上の要素が詰まるような動きが欲しい
2、選択した要素がメニューバーの中の一番下に並ぶが、2回目は元の位置に戻したい
例
１ クリック
↓
2
3
4
5 この状態で4をクリック
6
1
↓
４ 再度4をクリックでメニューバー開く
↓
１
２
３ これが理想です
５
６
４
2
3
5
6 現状です
1
4
現状、選んだものが一番下にきますが、再度別のメニューを選ぶとその選んだものが一番下にきて最初に選んだメニューが下から２番目にきてします。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Q290782</title> 6 <link rel="stylesheet" href="styles.css"> 7 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 8 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 9 10 11 <script> 12 $(function() { 13 $(".tabLabel").on("click", function() { 14 const bottomItem = $(".bottom-item .tabLabel").get(0); 15 if (this !== bottomItem) { 16 $(".bottom-item").append(this); 17 $(".slider").append(bottomItem); 18 } 19 $(".slider").toggle('slide', { direction: 'down' }); 20 }); 21 }); 22 </script> 23 24</head> 25<body> 26 27<div class="block">こっち側から詰めて欲しい</div> 28 29<div class="sliderWrapper"> 30 <ul class="keywordTab slider"> 31 <li class="tabLabel">ジャンル５</li> 32 <li class="tabLabel">ジャンル４</li> 33 <li class="tabLabel">ジャンル３</li> 34 <li class="tabLabel">ジャンル２</li> 35 <li class="tabLabel">ジャンル１</li> 36 </ul> 37</div> 38<ul class="keywordTab bottom-item"> 39 <li class="tabLabel">全てのジャンル</li> 40</ul> 41 42<div class="block">こっち側が上に詰めてしまう</div> 43 44</body> 45</html>
css
1 2.block{ 3 width: 300px; 4 height: 100px; 5 background-color: #000; 6 margin: 0 auto; 7 color:white; 8} 9 10.keywordTab { 11 display: flex; 12 flex-direction: column; 13 justify-content: space-around; 14 align-items: center; 15 margin: 0 auto; 16 list-style: none; 17} 18 19.tabLabel { 20 display: flex; 21 opacity: 0.6; 22 width: calc(300 * (100vw / 375)); 23 height: 50px; 24 font-size: 1.5rem; 25 justify-content: center; 26 align-items: center; 27 cursor: pointer; 28 border-bottom: 0.1rem solid #967F4F; 29 color: #000; 30} 31
実装のサンプル
https://codepen.io/jun94516/pen/vYGjBvo
試したこと
.sliderWrapper
にメニューバー分のheightを持たせればずれること自体起きなくなるが一つで表示されているときに余白が気になる。
そもそも①の問題は解決できるのか、
②に関しては私のjsの知識不足です。。
どうかよろしくお願いいたします。
補足情報（FW/ツールのバージョンなど）
プルダウンメニュー部分にjquery uiを使用
回答1件
0
ベストアンサー
直してみました
どうでしょうか？
仕様が変わったのが
※サンプルおいていただいたおかげで確認作業だいぶ楽になりました。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="styles.css"> 7 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 8 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 9 <script> 10 $(function() { 11 $(".tabLabel").on("click", function() { 12 var bottomItem = $(".bottom-item .tabLabel").get(0); 13 // 一番最後に表示されている要素を定位置に挿入する 14 var n = Number(bottomItem.getAttribute('index')); 15 if(n == 0){ 16 $(".slider").prepend(bottomItem); 17 } else { 18 $(".slider li[index='" + String(n - 1) + "']").after(bottomItem); 19 } 20 $(".bottom-item").empty(); 21 if (this !== bottomItem) { 22 // ----- メニューが開いているとき 23 $(".bottom-item").append(this); // クリックしたliを最後に追加 24 } else { 25 // ----- メニューが閉じているとき 26 bottomItem = $(".slider > *:last"); 27 $(".bottom-item").append(bottomItem); // 一覧の最後を最後に追加 28 } 29 $(".slider").toggle('slide', { direction: 'up' }); 30 }); 31 }); 32 </script> 33</head> 34<body> 35 36<div class="block">こっち側から詰めて欲しい</div> 37 38<div class="sliderWrapper"> 39 <ul class="keywordTab slider"> 40 <li class="tabLabel" index="0">ジャンル５</li> 41 <li class="tabLabel" index="1">ジャンル４</li> 42 <li class="tabLabel" index="2">ジャンル３</li> 43 <li class="tabLabel" index="3">ジャンル２</li> 44 <li class="tabLabel" index="4">ジャンル１</li> 45 </ul> 46</div> 47<ul class="keywordTab bottom-item"> 48 <li class="tabLabel" index="5">全てのジャンル</li> 49</ul> 50 51<div class="block">こっちが詰めてしまう</div> 52 53</body> 54</html>
投稿2020/09/19 22:03
総合スコア2506
あなたの回答
tips
プレビュー
