• ベストアンサー
  • 困ってます

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

  • 質問No.9123436
  • 閲覧数355
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0
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
  • ベストアンサー

ベストアンサー率 48% (80/166)

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

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

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

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

読み込んだjQueryが同じものでは無いので、推測するしかありませんが
何処かでバグがある気がします。
お礼コメント
noname#226032
ありがとうございます。

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

"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>
投稿日時:2016/02/08 23:17
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ