【ES5/JS】開閉処理ボタンについて

Question

クリックすると要素が表示されるものを作っています。

＜質問＞
機能的には問題ないのですが、コード的に改善できるところを教えて欲しいです。
また、今は滑らかにスライドしていないので、jQueryのslideToggleのようにする良い方法もあれば御指南いただきたいです。

＜仕様＞
・JSを
・

よろしくお願いします。

Comments

[m.ts10806]

コードは外部サービスだけでなく質問本文にもマークダウンにてご提示ください。
また「とりあえず全部見てほしい」は作業依頼、デバッグ依頼です。質問ではありません。
もっとポイントを絞った方が良いでしょう。

[think49]

m.ts10806さんが仰る通り、リファクタリングは「質問」ではなく、「作業依頼」と思います。
https://teratail.com/questions/146435#reply-220931

[yambejp]

転載先のソースを読み取れではなく仕様くらいはきちんと提示してください
jQueryは使って良いのか、jsだけでやりたいのかも付記してください
（cssを利用しないスライド処理ならjQueryってことなのかな？）

[miyabi_pudding]

ES5で書く理由も掲示お願いします。
古いブラウザ対応のために必要ということでしょうか？
特に上記のような理由がなければ、ES6〜の書き方でいいと思いますが。
（よりよいコード、となら、ES6〜でもっと短く、わかりやすい構文にできる可能性も出てくるので）

Answer 1

コード的に改善できるところを教えて欲しい

• window.onloadやelement.onclickではなくて、addEventListenerを使った方がいいのでは？
• ネストが深いので、コードを割った方がいいかもしれません。
• styleを操作するより、classを操作してスタイル記述をCSSに書く方が、個人的には好みです。

今は滑らかにスライドしていないので、jQueryのslideToggleのようにする良い方法もあれば

CSS Transition がおすすめです。
CSS トランジションの使用 - CSS: カスケーディングスタイルシート | MDN

Comments

[frtne]

ご回答ありがとうございます！

Answer 2

開いたときの隠す処理と、ボタンクリックしたときのトグル処理が
微妙に競合しますね・・・

Comments

[yambejp]

調整しました
<script>
$(function(){
$('.js_slide_item').filter(function(){
var idx=$(this).closest('.js_slide').find('.js_slide_item').index(this);
return $(this).closest('.js_slide').data('default')<=idx;
}).hide();
$('.js_slide_button').on('click',function(){
var txt=$(this).text();
$(this).text(txt=="開く"?"閉じる":"開く");
var pre=$(this).closest('div').prev('.js_slide');
var def=$(pre).data('default');
pre.find('.js_slide_item:gt('+(def-1)+')').slideToggle();
});
});
</script>

<div id="banner-message">
<ul class="js_slide" data-default="1">
<li class="js_slide_item">item1</li>
<li class="js_slide_item">item2</li>
<li class="js_slide_item">item3</li>
<li class="js_slide_item">item4</li>
</ul>
<div>
<button class="js_slide_button">開く</button>
</div>
<ul class="js_slide" data-default="2">
<li class="js_slide_item">item1</li>
<li class="js_slide_item">item2</li>
<li class="js_slide_item">item3</li>
</ul>
<div>
<button class="js_slide_button">開く</button>
</div>
</div>

[frtne]

すごくスッキリ。！
具体的に教えていただきありがとうございます