質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

もっと見るのボタンが反応せずもっと見れません

yummy_2
yummy_2

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0リアクション

0クリップ

226閲覧

投稿2022/10/02 04:38

編集2022/10/02 04:39

前提

jQueryでもっと見るのボタンを実装しようとしています。
もっと見るのボタンが押しても反応しないです。

実現したいこと

もっと見るボタンを押して4つ→8つにリストを増やしたいです。

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

  • more のボタンを押しても反応しません

該当のソースコード

HTML

<section id="works" class="section-works"> <h2># WORKS</h2> <div class="works-list"> <ul class="list"> <li class="list-item"> <img src="assets/image/bike_site_image.png" alt="自転車紹介サイト"> <p>bikeプロフィール(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/furniture_design_site.png" alt="f家具サイト"> <p>家具のオンラインショッピング(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/my_works_site.png" alt="仕事のサイト"> <p>My Works(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/travel_blog_site.png" alt="トラベルサイト"> <p>トラベルサイト(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/site_list04.png" alt="DHWスポーツサイト"> <p>家具のオンラインショッピング(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/site_list02.png" alt="プロフィールサイト"> <p>プロフィールサイト</p> </li> <li class="list-item"> <img src="assets/image/site_list03.png" alt="スグ食べ"> <p>スグ食べ(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/site_list01.png" alt="美容室A.R.E.(プライベートワーク)"> <p>美容室A.R.E.(プライベートワーク)</p> </li> </ul> <div class="list-btn"> <button>+ More</button> </div> </div> </section>

CSS

.list-item{ opacity: 1; } .list-item.is-hidden { opacity: 0; height: 0; margin: 0; } .list-btn { margin-top: 20px; } .list-btn.is-btn-hidden{ display:none; } .list-btn button { background-color: #e7c9e0; color:#2b2a2b; height: 50px; width: 180px; border-radius: 50px; border: none; cursor: pointer; outline: none; padding: 0; line-height: 32px; }

js

var moreNum = 4; $('.list-item:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden'); $('.list-btn').on('click', function() { $('.list-item.is-hidden').slice(0, moreNum).removeClass('is-hidden'); if ($('.list-item.is-hidden').length == 0) { $('.list-btn').fadeOut(); } }); $(function() { var list = $(".list li").length; if (list < moreNum) { $('.list-btn').addClass('is-btn-hidden'); } });

補足情報(FW/ツールのバージョンなど)

HTML5/CSS3
https://web.runland.co.jp/blog_cate2/post-4137
このサイトの二個目の動きを入れようと思いました。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Cocode

2022/10/02 06:36

試しに、CSSの .list-btn button{...} のブロックをごっそり削除してデフォルトの見た目にすると、ちゃんと動作するんですよね。 .list-btn button{...} を復活させると、カーソルが指の形に変化するポイントって、すっごい限られてて…ボタン上なのに、押せるところと押せないところがあります。 指になったところでクリックしたらちゃんと動くけど、矢印のままのときは動きません。 CSSが何か悪さしているようで、調査中です。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。