JavaScriptを開いて閉じるメニューを実行するにはどうすればよいですか？

私は、自分のウェブサイトのモバイル版のJqueryを開く/閉じるbuttonというメニューを作成しました。今私はメニューを開くことができますが、メニューボタンをタッチするだけで、実際には、一度それを開くと、1つのセクションをタップしようとすれば、li.horizontalメニューは開いたままになります。同じボタンとli.horizontalまた、メニューのjQueryだけが必要なので、私はプレーンJavaScriptを使用することをお勧めします.Googleスピードテストではそれが示唆しているためです。JavaScriptを開いて閉じるメニューを実行するにはどうすればよいですか？

私の悪い英語のため申し訳ありません...あなたの助けのために事前にありがとうございます:)

以下この私の現在のコードされています

<head> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function(){ 
 
    
 
\t \t //When btn is clicked 
 
\t \t $(".btn-responsive-menu").click(function() { 
 
\t \t \t $("#menu").toggleClass("show"); 
 
\t \t 
 
\t \t }); 
 
    
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
     <div class="btn-responsive-menu"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </div> 
 
<section id="home"> 
 
<header> 
 
<!-- i contenuti --> 
 

 
<div id="menu" class=""> 
 

 
<ul> 
 
<li class="horizontal"><a href="#home">home</a></li> 
 
<li class="horizontal"><a href="#theatres_museums">theatres & museums</a></li> 
 
<li class="horizontal"><a href="#luxury_houses">luxury houses</a></li> 
 
<li class="horizontal"><a href="#retail">retail</a></li> 
 
<li class="horizontal"><a href="#hotels">hotels</a></li> 
 
<li class="horizontal"><a href="#yacht">yacht</a></li> 
 
<li class="horizontal"><a href="#design">design</a></li> 
 
<li class="horizontal"><a href="news.html">news</a></li> 
 
<li class="horizontal"><a href="contacts.html">contacts</a></li> 
 
</ul> 
 
</div>

出典

2016-09-15 alberto96

あなたはhttps://jsfiddle.net/で一例として、サンプルを提供できるかどうかは大いに役立つだろう。 javascriptのセクションでは、jqueryのようなライブラリを提供して、あなたを助けたいと思っている人のためにコードを実行することもできます。 – meistermeier

がために、このクリックイベントをお試しくださいクリック時のメニューを閉じる

$('.horizontal').click(function(){ 
    $("#menu").removeClass("show"); 
    window.location = $(this).find(a).attr('href'); 
});

のバニラJS

document.getElementsByClassName("horizontal")[0].addEventListener("click", function(e){ 
document.getElementById("menu").className.replace(/\bshow\b/,''); 
window.location = e.target.getAttribute("href") 
});

出典

2016-09-15 08:13:59 madalinivascu

これは大変ありがとうございます！プレーンなJavaScriptを使って簡単に入手できる方法があれば分かりますか？ – alberto96

jqueryを使用する予定がない場合は、簡単にこれをjavascriptに変換することができます – madalinivascu

バニラjsをありがとう、問題は私がjavascript hahaを知らないのでボタン全体を開く必要があることです...私はJSに変換するには、この下の意味BTNが \t \t $を（クリックすると – alberto96

$('.horizontal').click(function(event){ 
    $("#menu").removeClass("show"); 
    window.location = $(event.target).attr('href'); 
});

出典

2016-09-15 08:16:39 Suraj

もう一方の答えのコードは、あなたのコードはメニューを閉じますが、それは "未定義の黒いページ"に終わります。とにかくありがとう！プレーンなJavaScriptを使って同じ結果を得るための簡単な方法があるのですか？ – alberto96

JavaScriptを開いて閉じるメニューを実行するにはどうすればよいですか？

答えて

関連する問題