jQueryでpタグの色をクリックで変えたい

スクロールで色を変えたあと(imgHeightの下に来た時）のpタグの色を、クリックした時に元の色に戻したいです。
toggleClassやremoveClassとaddClassなど試してみましたが、色が変わりません。
どこが原因でしょうか。

HTML
1<header>
2  <h1 class="site-title">
3    <a href="./nmt.html">
4      <img src="img/site-logo.png" class="logo" alt="ロゴ">
5    </a>
6  </h1>
7
8  <!-- ハンバーガーメニュー部分 -->
9<div class="drawer" id="burger">
10
11  <!-- ハンバーガーメニューの表示・非表示を切り替えるチェックボックス -->
12  <input type="checkbox" id="drawer-check" class="drawer-hidden" >
13
14  <!-- ハンバーガーアイコン -->
15  <label for="drawer-check" class="drawer-open" id="click">
16    <span></span>
17    <p class="menu" >menu</p>
18  </label>
19
20  <!-- メニュー -->
21  <nav class="drawer-content">
22    <ul class="drawer-list" id="humber">
23      <li class="drawer-item">
24        <a href="#desa" style="text-decoration:none;">About</a>
25      </li><!-- /.drawer-item -->
26      <li class="drawer-item">
27        <a href="#services" style="text-decoration:none;">Service</a>
28      </li><!-- /.drawer-item -->
29      <li class="drawer-item">
30        <a href="#newses"  style="text-decoration:none;">news</a>
31      </li><!-- /.drawer-item -->
32      <li class="drawer-item">
33        <a href="#contacts" style="text-decoration:none;">Contact</a>
34      </li><!-- /.drawer-item -->
35    </ul><!-- /.drawer-list -->
36  </nav>
37  <span class="burger-musk" id="musk"></span>
38</div><!--drawer-->
39
40</header>
41
42<div class="contents">
43<div class="first">
44  <div class="company">
45    <div class="copy-size">
46      <p class="copy">デザインで人を笑顔にする会社<br>DIGSMILE INC.</p>
47       <h1 class="copy design">DESIGN<br>FOR<br>SMILE</h1>
48    </div>
49  </div>
50</div><!--first-->
51</div><!--contents-->
52

CSS
1header {
2  height: 60px;
3  width: auto;
4  position: absolute;
5}
6
7.logo {
8  margin-left: 50px;  
9}
10
11.contents {
12  height: 90%;
13}
14/*ファーストビュー*/
15.contents {
16  height: 100%;
17}
18
19.first {
20  height: 100%;
21  background-image: url(img/kv-img.png);
22  height: 90%;
23  width: 80%;
24  background-size: cover;
25  z-index: 5;
26  padding: 0;
27  margin: 0;
28}
29
30.first::after {
31  content: "";
32  display: block;
33  position: absolute;
34  top: 0;
35  right: 0;
36  background-color: #222;
37  width: 50%;
38  height: 100%;
39  z-index: -1;
40}
41
42/* チェックボックスは非表示に */
43.drawer-hidden {
44  display: none;
45}
46
47/* ハンバーガーアイコンの設置スペース */
48.drawer-open {
49  display: flex;
50  height: 60px;
51  width: 15%;
52  justify-content: center;
53  align-items: center;
54  position: relative;
55  z-index: 100;/* 重なり順を一番上に */
56  cursor: pointer;
57  float: right;
58  z-index: 100;
59  position: fixed;
60  top: 0px;
61  right: 0px;
62}
63
64/* 三本線のうち一番上の棒の位置調整 */
65.drawer-open span:before {
66  bottom: 8px;
67}
68
69/* 三本線のうち一番下の棒の位置調整 */
70.drawer-open span:after {
71  top: 8px;
72}
73
74/* アイコンがクリックされたら真ん中の線を透明にする */
75#drawer-check:checked ~ .drawer-open span {
76  background: rgba(255, 255, 255, 0);
77}
78
79/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
80#drawer-check:checked ~ .drawer-open span::before {
81  bottom: 0;
82  transform: rotate(45deg);
83}
84#drawer-check:checked ~ .drawer-open span::after {
85  top: 0;
86  transform: rotate(-45deg);
87}
88/*menuクリックでトーンを下げる*/
89#drawer-check:checked ~ .burger-musk{
90  opacity: 1;
91  transition: .8s;
92}
93
94/* メニューのデザイン*/
95.drawer-content {
96  width: 30%;
97  height: 100%;
98  position: fixed;
99  top: 0;
100  left: 100%;/* メニューを画面の外に飛ばす */
101  z-index: 99;
102  background: rgba(12, 12, 12, 0.911);
103  transition: .5s;
104  text-align: center;
105  padding-top: 100px;
106}
107
108.drawer-content ul {
109  list-style: none;
110}
111
112.drawer-content a {
113  color: white;
114}
115
116/* アイコンがクリックされたらメニューを表示 */
117#drawer-check:checked ~ .drawer-content {
118  left: 70%;/* メニューを画面に入れる */
119}
120/* チェックボックスは非表示に */
121.drawer-hidden {
122  display: none;
123}
124/*ハンバーガーメニュー*/
125.drawer-open span,
126.drawer-open span::before,
127.drawer-open span::after {
128  content: '';
129  display: block;
130  height: 3px;
131  width: 25px;
132  border-radius: 3px;
133  background: #fff;
134  transition: 0.5s;
135  position: absolute;
136}
137
138.drawer-item {
139  font-size: 30px;
140  padding-bottom: 40px;
141}
142
143.drawer {
144  display: block;
145}
146
147.burger-musk {
148  background-color: rgba(56, 56, 56, 0.603);
149  width: 100%;
150  height: 100%;
151  position: fixed;
152  padding: 0;
153  margin: 0;
154  top: 0;
155  opacity: 0;
156  z-index: 50;
157}
158
159.drawer-open.change span,
160.drawer-open.change span:before,
161.drawer-open.change span:after {
162  content: '';
163  display: block;
164  height: 3px;
165  width: 25px;
166  border-radius: 3px;
167  background: #222;
168  transition: 0.5s;
169  position: absolute;
170}
171.drawer-open span .change {
172display: flex;
173height: 60px;
174width: 15%;
175justify-content: center;
176align-items: center;
177position: relative;
178z-index: 100;/* 重なり順を一番上に */
179cursor: pointer;
180float: right;
181z-index: 100;
182position: fixed;
183top: 0px;
184right: 0px;
185}
186
187body.nonscroll {
188  overflow: hidden;
189}
190.menu {
191  display: block;
192  font-size: 1rem;
193  text-transform: uppercase;
194  color: #fff;
195  font-weight: bold;
196  float: right;
197  margin-left: 100px;
198  padding-top: 0;
199  font-family: 'arial black';
200}
201.color {
202  display: block;
203  font-size: 1rem;
204  text-transform: uppercase;
205  color: #fff;
206  font-weight: bold;
207  float: right;
208  margin-left: 100px;
209  padding-top: 0;
210  font-family: 'arial black';
211
212}
213.copy {
214  color: #fff;
215  display: block;
216  margin-bottom: 10px;
217}
218
219.copy-size p {
220  padding-bottom: 10px;
221  font-size: 20px;
222}
223
224.design {
225  font-family: 'arial black';
226  margin-top: 0;
227  font-size: 80px;
228}
229
230.company {
231  z-index: 100;
232  padding-top: 180px;
233  margin-right: -180px;
234  display: flex;
235  justify-content: flex-end;
236}
237
238.company h1 {
239  font-size: 70px;
240}

jQuery
1/*スクロールで色変更*/
2jQuery(window).on('scroll', function () {
3  var imgHeight = $('.contents').outerHeight();
4
5  /*色変更*/
6  if (imgHeight < jQuery(this).scrollTop()) { /*背景の下に来たとき*/
7    $('.menu').css('color','#222');/*menuを黒に*/
8    $('.drawer-open').addClass('change');/*ハンバーガーメニューを黒に*/
9  } else {
10     jQuery('.menu').css('color','#fff'); /*menuを白に*/
11     $('.drawer-open').removeClass('change');/*ハンバーガーメニューを白に*/
12    }  
13})
14
15$(function(){
16  var imgHeight = $('.contents').outerHeight();
17   $('.drawer-open').on('click',function(){
18     if($(window).scrollTop()<imgHeight-50){/*ハンバーガーメニューが黒より上*/
19      $('.burger-musk').fadeToggle(300);
20      $('body').toggleClass('nonscroll');/*ハンバーガーメニュー開いたときスクロールしない*/
21     }else {/*ハンバーガーメニューが黒より下*/
22       $(this).toggleClass('change');/*メニューを黒白に変化*/
23       $('.burger-musk').fadeToggle(300);
24       $('body').toggleClass('nonscroll');/*ハンバーガーメニュー開いたときスクロールしない*/
25       $('.drawer-open p').toggleClass('color');
26      }
27   })
28  })

Lhankor_Mhy

2021/03/31 09:39

HTMLをご提示ください。

azaz_wb

2021/03/31 13:12

間違えてCSSを載せていました。すみません。ハンバーガーメニューはできたので、pタグの変え方を教えていただけると嬉しいです。

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

回答2件

自己解決

HTMLをcolor: #fff !important;にした上で、removeClass('color')とaddClass('color')を追加してtoggleClass('color')にすることで解決できました。

HTML
1<header>
2  <h1 class="site-title">
3    <a href="./nmt.html">
4      <img src="img/site-logo.png" class="logo" alt="ロゴ">
5    </a>
6  </h1>
7
8  <!-- ハンバーガーメニュー部分 -->
9<div class="drawer" id="burger">
10
11  <!-- ハンバーガーメニューの表示・非表示を切り替えるチェックボックス -->
12  <input type="checkbox" id="drawer-check" class="drawer-hidden" >
13
14  <!-- ハンバーガーアイコン -->
15  <label for="drawer-check" class="drawer-open" id="click">
16    <span></span>
17    <p class="menu color" id="icon" >menu</p>
18  </label>
19
20  <!-- メニュー -->
21  <nav class="drawer-content">
22    <ul class="drawer-list" id="humber">
23      <li class="drawer-item">
24        <a href="#desa" style="text-decoration:none;">About</a>
25      </li><!-- /.drawer-item -->
26      <li class="drawer-item">
27        <a href="#services" style="text-decoration:none;">Service</a>
28      </li><!-- /.drawer-item -->
29      <li class="drawer-item">
30        <a href="#newses"  style="text-decoration:none;">news</a>
31      </li><!-- /.drawer-item -->
32      <li class="drawer-item">
33        <a href="#contacts" style="text-decoration:none;">Contact</a>
34      </li><!-- /.drawer-item -->
35    </ul><!-- /.drawer-list -->
36  </nav>
37  <span class="burger-musk" id="musk"></span>
38</div><!--drawer-->
39
40</header>
41
42<div class="contents">
43<div class="first">
44  <div class="company">
45    <div class="copy-size">
46      <p class="copy">デザインで人を笑顔にする会社<br>DIGSMILE INC.</p>
47       <h1 class="copy design">DESIGN<br>FOR<br>SMILE</h1>
48    </div>
49  </div>
50</div><!--first-->
51</div><!--contents-->
52

CSS
1header {
2  height: 60px;
3  width: auto;
4  position: absolute;
5}
6
7.logo {
8  margin-left: 50px;  
9}
10
11.contents {
12  height: 90%;
13}
14/*ファーストビュー*/
15.contents {
16  height: 100%;
17}
18
19.first {
20  height: 100%;
21  background-image: url(img/kv-img.png);
22  height: 90%;
23  width: 80%;
24  background-size: cover;
25  z-index: 5;
26  padding: 0;
27  margin: 0;
28}
29
30.first::after {
31  content: "";
32  display: block;
33  position: absolute;
34  top: 0;
35  right: 0;
36  background-color: #222;
37  width: 50%;
38  height: 100%;
39  z-index: -1;
40}
41
42/* チェックボックスは非表示に */
43.drawer-hidden {
44  display: none;
45}
46
47/* ハンバーガーアイコンの設置スペース */
48.drawer-open {
49  display: flex;
50  height: 60px;
51  width: 15%;
52  justify-content: center;
53  align-items: center;
54  position: relative;
55  z-index: 100;/* 重なり順を一番上に */
56  cursor: pointer;
57  float: right;
58  z-index: 100;
59  position: fixed;
60  top: 0px;
61  right: 0px;
62}
63
64/* 三本線のうち一番上の棒の位置調整 */
65.drawer-open span:before {
66  bottom: 8px;
67}
68
69/* 三本線のうち一番下の棒の位置調整 */
70.drawer-open span:after {
71  top: 8px;
72}
73
74/* アイコンがクリックされたら真ん中の線を透明にする */
75#drawer-check:checked ~ .drawer-open span {
76  background: rgba(255, 255, 255, 0);
77}
78
79/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
80#drawer-check:checked ~ .drawer-open span::before {
81  bottom: 0;
82  transform: rotate(45deg);
83}
84#drawer-check:checked ~ .drawer-open span::after {
85  top: 0;
86  transform: rotate(-45deg);
87}
88/* メニューのデザイン*/
89.drawer-content {
90  width: 30%;
91  height: 100%;
92  position: fixed;
93  top: 0;
94  left: 100%;/* メニューを画面の外に飛ばす */
95  z-index: 99;
96  background: rgba(12, 12, 12, 0.911);
97  transition: .5s;
98  text-align: center;
99  padding-top: 100px;
100}
101
102.drawer-content ul {
103  list-style: none;
104}
105
106.drawer-content a {
107  color: white;
108}
109
110/* アイコンがクリックされたらメニューを表示 */
111#drawer-check:checked ~ .drawer-content {
112  left: 70%;/* メニューを画面に入れる */
113}
114/* チェックボックスは非表示に */
115.drawer-hidden {
116  display: none;
117}
118/*ハンバーガーメニュー*/
119.drawer-open span,
120.drawer-open span::before,
121.drawer-open span::after {
122  content: '';
123  display: block;
124  height: 3px;
125  width: 25px;
126  border-radius: 3px;
127  background: #fff;
128  transition: 0.5s;
129  position: absolute;
130}
131
132.drawer-item {
133  font-size: 30px;
134  padding-bottom: 40px;
135}
136
137.drawer {
138  display: block;
139}
140
141.burger-musk {
142  background-color: rgba(56, 56, 56, 0.603);
143  width: 100%;
144  height: 100%;
145  position: fixed;
146  padding: 0;
147  margin: 0;
148  top: 0;
149  z-index: 50;
150  display: none;
151}
152
153.drawer-open.change span,
154.drawer-open.change span:before,
155.drawer-open.change span:after {
156  content: '';
157  display: block;
158  height: 3px;
159  width: 25px;
160  border-radius: 3px;
161  background: #222;
162  transition: 0.5s;
163  position: absolute;
164}
165.drawer-open .change {
166display: flex;
167height: 60px;
168width: 15%;
169justify-content: center;
170align-items: center;
171position: relative;
172z-index: 100;/* 重なり順を一番上に */
173cursor: pointer;
174float: right;
175z-index: 100;
176position: fixed;
177top: 0px;
178right: 0px;
179}
180
181body.nonscroll {
182  overflow: hidden;
183}
184.menu {
185  display: block;
186  font-size: 1rem;
187  text-transform: uppercase;
188  color: #fff;
189  font-weight: bold;
190  float: right;
191  margin-left: 100px;
192  padding-top: 0;
193  font-family: 'arial black';
194}
195.color {
196  color:#fff!important;
197}
198.copy {
199  color: #fff;
200  display: block;
201  margin-bottom: 10px;
202}
203
204.copy-size p {
205  padding-bottom: 10px;
206  font-size: 20px;
207}
208
209.design {
210  font-family: 'arial black';
211  margin-top: 0;
212  font-size: 80px;
213}
214
215.company {
216  z-index: 100;
217  padding-top: 180px;
218  margin-right: -180px;
219  display: flex;
220  justify-content: flex-end;
221}
222
223.company h1 {
224  font-size: 70px;
225}

jQuery
1/*スクロールで色変更*/
2jQuery(window).on('scroll', function () {
3  var imgHeight = $('.contents').outerHeight();
4
5  /*色変更*/
6  if (imgHeight < jQuery(this).scrollTop()) { /*背景の下に来たとき*/
7    $('.menu').removeClass('color');/*menuを黒に*/
8    $('.menu').css('color','#222')
9    $('.drawer-open').addClass('change');/*ハンバーガーメニューを黒に*/
10  } else {
11     jQuery('.menu').addClass('color'); /*menuを白に*/
12     $('.drawer-open').removeClass('change');/*ハンバーガーメニューを白に*/
13    }  
14})
15
16$(function(){
17  var imgHeight = $('.contents').outerHeight();
18   $('.drawer-open').on('click',function(){
19     if($(window).scrollTop()<imgHeight-50){/*ハンバーガーメニューが黒より上*/
20      $('.burger-musk').fadeToggle(300);
21      $('body').toggleClass('nonscroll');/*ハンバーガーメニュー開いたときスクロールしない*/
22    }else {/*ハンバーガーメニューが黒より下*/
23       $(this).toggleClass('change');/*メニューを黒白に変化*/
24       $('.burger-musk').fadeToggle(300);
25       $('body').toggleClass('nonscroll');/*ハンバーガーメニュー開いたときスクロールしない*/
26       $('.menu').toggleClass('color');
27      }
28   })
29  })
30  if(('.drawer-open p').hasClass('color')){
31    $('.menu').css('color','#fff');
32  }
33