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

Question

前提

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

実現したいこと

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

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

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

該当のソースコード

<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>

.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;
}

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
このサイトの二個目の動きを入れようと思いました。

Comments

[Cocode]

試しに、CSSの .list-btn button{...} のブロックをごっそり削除してデフォルトの見た目にすると、ちゃんと動作するんですよね。

.list-btn button{...} を復活させると、カーソルが指の形に変化するポイントって、すっごい限られてて…ボタン上なのに、押せるところと押せないところがあります。
指になったところでクリックしたらちゃんと動くけど、矢印のままのときは動きません。

CSSが何か悪さしているようで、調査中です。

Answer 1

.list-item.is-hiddenの中の子要素か親要素からはみ出して.list-btnを覆っているので、クリックできない状態になってます。
対策はいろいろありますが、overflow: hidden;を追加してはみ出し部分を切り取ればいいでしょう。

.list-item.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden; /* 追加 */
}

位置が前の要素が後の要素の前面にくる原因は、opacity: 0 を設定していることです。これははまりやすいので要注意ですね。

opacity - CSS: カスケーディングスタイルシート | MDN
このプロパティを 1 以外の値で用いると、その要素は新しい重ね合わせコンテキストを作ります。

Comments

[yummy_2]

ボタンちゃんと反応しました！！
ありがとうございます！！