jQuery onclickクラスを追加して削除する

Question

コードが正しく動作しません。 私はユーザのときにをクリックしてclass="menubutton"をheaderタグに追加する必要があります。クラスの追加は"hidden"です。もう一度押すと、クラスが削除されました。

ここは私のコードです。

HTML：

<header> 
    <div class="headgeneral"> 
    <div id="headerlogo_dot"> 
     <div class="menubutton"> 
     <i class="fa fa-bars" aria-hidden="true"></i> 
     </div> 
    </div> 
    </div> 

のjQuery：

jQuery('.menubutton').click(function() { 
    jQuery("header").toggleClass("hidden"); 
}); 

Answer 1

あなたは、ドキュメントがロードされた後、jQueryのリスナーをロードする必要があります。あなたはそのようにすることができます：

$('document').ready(function() { 
    $('.menubutton').click(function() { 
    $("header").toggleClass("hidden"); 
    }); 
}); 

PS：スニペットは何も読み込まれません、それを修正しようとします。それがなければ私たちはあなたに多くの情報を与えることはできません。準備メソッド内ではJQuery必見書かれたコードを使用して

Answer 2

$('document').ready(function() { 
 
    jQuery('.menubutton').click(function() { 
 
    jQuery("header").toggleClass("hidden"); 
 
    }); 
 
});

.headgeneral{ 
 
    border: 2px solid black; 
 
    padding: 30px; 
 

 
} 
 

 
.menubutton{ 
 
    border: 1px solid green; 
 
    padding: 10px; 
 
} 
 

 
.hidden{ 
 
    background: #ffd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<header> 
 
    <div class="headgeneral"> 
 
    <div id="headerlogo_dot"> 
 
     <div class="menubutton"> 
 
     <i class="fa fa-bars" aria-hidden="true"></i> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</header>

、それがページに表示されないように、あなたのタグに任意のスタイルについては言及しませんでした。