クリックファンクションがうまくいきません。
class="link-block"
のついたli
つまりリストをクリックした時、.removeClass('active');
でactive
というクラスを削除するようにしたかったのですが、
なぜかリストをクリックしても反応せずに削除されません。
id="maware"
のli
だけは、反応して削除されます。
CSSにとしてもだめでした。どうもclass="link-block"
のついたリストをクリックできていないのかと思っているのですが、上下の順番でクリックできていないのでしょうか?
.link-block {
display: block;
z-index: 99999;
}
・ソースコード
<!-- 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>
https://jsfiddle.net/80od313c/
上記に再現しましたが、こちらは実際にJSを動かすことはできないのですかね?