クリックファンクションがうまくいかない

質問

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>

_____________

回答No.1

m_matsubara · ベストアンサー

質問が２つありますので、順番に回答させていただきます。

まず一つ目ですが、"active"が外れないのは
コードを読む感じ、やりたいことを実現するには
$('.kuruttosuru')
に対して、activeクラスを当てているのですから
$(this).removeClass('active');
ではなく
$(".kuruttosuru").removeClass('active');
と書かないと、指定されたクラスが違うものになってしまいますね。

あと、もう一つ
とりあえずは、Firebugなどのデバッガをインストールしましょう。
プログラムにエラーがあると、デバッガ上に表示がありますので、それ原因が大幅に特定されやすくなります。
手元で動かしてみた感じでは、下の様にエラーメッセージが出ました。

TypeError: target.offset(...) is undefined

読み込んだjQueryが同じものでは無いので、推測するしかありませんが
何処かでバグがある気がします。

お礼

ありがとうございます。

下記のエラーにのみ見つかりました。

"Google Maps API warning: SensorNotRequired
https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required"

また下記のようにしてもだめです。
<!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション -->
<script>
$(function(){
$('.kuruttosuru').on('click', function() {
$('.kuruttosuru').addClass('active');
return false;
});
});
</script>

<!-- blackbackground-クリックした際にクルット回るアクション- -->
<script>
$(function(){
$(document).on('click', '.overlay-haikeikurokari, #maware, .link-block ,.showMenue', function(){
//ulをクリックすると、メニューが戻る
$('.kuruttosuru').removeClass('active');
// $(this).off('click');
});
});
</script>

・
ただ下記をクリックしたときは、ちゃんとクルットしたアニメーションがついてくれます。

<li id="js-drwar-action"><a class="link-block action-hover animation-hover" href="#top"><i class="material-icons drawermenu__material-icons action-hover animation-hover">&#xE5CE;</i></a></li>