クリックファンクションがうまくいかない
class="link-block"のついたliつまりリストをクリックした時、.removeClass('active');でactiveというクラスを削除するようにしたかったのですが、
なぜかリストをクリックしても反応せずに削除されません。
id="maware"のliだけは、反応して削除されます。
CSSにとしてもだめでした。どうもclass="link-block"のついたリストをクリックできていないのかと思っているのですが、上下の順番でクリックできていないのでしょうか？
.link-block {
display: block;
z-index: 99999;
}
・ソースコード
<div class="kuruttosuru">aaa</div>
<!-- drawermenu -->
<!-- drawermenu-button -->
<div class="modal-button-wrap">
<a class="animation-hover action-hover modal-button-wrap__button">
<span class="modal-button-wrap__border"></span><!-- border -->
<span class="modal-button-wrap__border"></span><!-- border -->
<span class="modal-button-wrap__border"></span><!-- border -->
</a>
</div>
<!-- drawermenu -->
<nav>
<div id="nav__drawermenu-wrap">
<ul>
<li id="maware"><a class="link-block" href="#js-about-me">ABOUTME</a></li>
<li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li>
<li><a class="link-block" href="#js-gallary">GALLARY</a></li>
<li><a class="link-block" href="#js-gmap">MAP</a></li>
<li><a class="link-block" href="#js-contact">CONTACT</a></li>
<li><a class="link-block" href="http:///index.html">TOP</a></li>
<li><a class="link-block" href="http:///index.html">BLOG</a></li>
</ul>
</div>
</nav>
<!-- /drawermenu -->
・JS
<script>
$(function(){
$('.kuruttosuru').on('click', function() {
$(this).addClass('active');
return false;
});
});
</script>
<!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション -->
<script>
$(function(){
$('.modal-button-wrap__button, .link-block').on('click', function() {
$(this).removeClass('active');
return false;
});
});
</script>
・下記のJSがあると、うまくいかず下記をコメントアウトするとうまくいきます。
下記に何かおかしくなる要素があるのでしょうか？
<!-- ページ内遷移 -->
<script>
$(function(){
// #で始まるアンカーすべてをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 1000; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
_____________
お礼
やはりダメでした。
補足
サイズを1にしたら、色が変化しました。何故なのかは未だに分かりません。