jqueryでhtmlを使用したサイドメニューの作成

私はサイドメニューのサンプルプログラムを作成しました。ここで、ユーザはボタンをクリックして、htmlとjavaスクリプトを使用してさまざまなオプションを持つサイドメニューを表示します。私は自分のhtml、js、cssファイルを別々に配置していますので、私のコードはきれいに見えます。しかし、実行時には正常に動作しませんが、コード全体が1つのファイルに置かれていると正常に動作します。私の間違いは何ですか？そして、コードにファイルを別々に置いて、予想される出力が得られるようにする方法。jqueryでhtmlを使用したサイドメニューの作成

HTML：

<body> 
    <button id="button">Click</button> 
    <div id="menu"> 
    <nav> 
     <ul style="list-style-type : none"> 
      <li> <a href="#" id="close"> Close </a></li> 
      <li>Home</li> 
      <li>Contacts</li> 
     </ul> 
     </nav> 
    </div> 
    <script src="sidemenu.js"></script>

のJs：

var getDetails = document.querySelector("#menu"); 
console.log(getDetails); 
var getButton = document.querySelector("#button"); 
var closeButton = document.querySelector("#close"); 

getButton.addEventListener("click",function(){ 
    getDetails.addClass('opend'); 
}); 

closeButton.addEventListener("click",function(){ 
    getDetails.removeClass('opend'); 
})

CSS：

ul{ 
    list-style-type: none ; 
}

出典

2017-02-02 jazzoria

「正常に動作している」ものを定義する必要があると思います... – evolutionxbox

htmlが存在する前にjavascriptを含めていますか？ – krisph

はい私はjsファイルを含んでいます。 – jazzoria

これは、あなたが探している機能でなければなりません（隠されたようなメニューが起動している場合）。あなたはaddClassとremoveClassを使用していますが、これらはベースラインのJavaScript関数ではありません。私はjsを純粋なjsに変更して、あなたが望んだのと同じ結果を達成しました。

var getDetails = document.querySelector("#menu"); 
 
console.log(getDetails); 
 
var getButton = document.querySelector("#button"); 
 
var closeButton = document.querySelector("#close"); 
 

 
getButton.addEventListener("click", function() { 
 
    getDetails.className += 'opend'; 
 
}); 
 

 
closeButton.addEventListener("click", function() { 
 
    getDetails.className = 'hidden'; 
 
})

ul { 
 
    list-style-type: none; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.opend { 
 
    display: block; 
 
}

<body> 
 
    <button id="button">Click</button> 
 
    <div id="menu" class="hidden"> 
 
    <nav> 
 
     <ul> 
 
     <li> <a href="#" id="close"> Close </a> 
 
     </li> 
 
     <li>Home</li> 
 
     <li>Contacts</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</body> 
 

 
<script src="sidemenu.js"></script>

出典

2017-02-02 15:28:09 Joffutt4

addClassとremoveClassはjqueryの関数です。純粋なJavaScriptでは動作しません。

はとJavaScriptから機能を追加使用してクラスを追加します。

getDetails.classList.add（ "自動的に開きました"）;

JavaScriptを使用してクラスを削除するには getDetails.className = "";

いくつかのクラスを維持する場合は、addを使用してクラスを再度追加します。

出典

2017-02-02 15:44:16

jqueryでhtmlを使用したサイドメニューの作成

答えて

関連する問題