隱藏點擊功能後的jquery菜單

這是一個響應式菜單，它只適用於我的媒體查詢中定義的尺寸，這就是爲什麼我要在點擊後隱藏子菜單的原因。

我想單擊其中一個鏈接，然後隱藏此下拉菜單。我知道.hide（），但我無法讓它工作。

任何幫助？

我想保持這個代碼簡單&乾淨。

HTML

<nav> 
      <ul class="navigation"> 
         <img src="img/menu.png" alt="mobile" width="50" height="50"/> 
         <li class="n1"><a href="#home">Principal</a></li> 
         <li class="n2"><a href="#services">Serviços</a></li> 
         <li class="n3"><a href="#team">Equipa</a></li> 
         <li class="n4"><a href="#contact">Contactos</a></li> 
      </ul> 
      <span>Euclides Style | 965648044</span> 
     </nav>

的Javascript

$("nav").click(function() { 
    $(".navigation").toggleClass('open'); 
});

UPDATE

我用一個簡單的解決方案：

$(".navigation a").click(function() { 
      $(".navigation").removeClass('open'); 
    });

感謝大家的幫助！

來源

2014-04-10 uniqezor

向我們展示了HTML也 – laaposto

因子評分是一樣的：「開放」類的d – uniqezor

CSS？ – MrPk

hide()正在工作。嘗試：

$("nav li").click(function() { 
    $(".navigation").hide(); 
});

DEMO

來源

2014-04-10 10:38:07 laaposto

假設公開課有display: none或display: block屬性（這取決於初始狀態）將正常工作。您可以使用toggle函數。

演示：http://jsfiddle.net/IrvinDominin/uQg2X/

來源

2014-04-10 10:39:16

$("a").on("click", function (e) { 
    e.preventDefault(); 
    $(".navigation").fadeOut(); 
});

或者你可以嘗試.hide（）甚至.fadeOut（）;

來源

2014-04-10 10:39:18

這將刪除我所有的「.navigation」，但我將其編輯爲「.navigation .open」。謝謝 – uniqezor

$("nav").click(function() { 
    $(".navigation").toggleClass('open'); 
});

，你應該添加一些CSS

.navigation{ display:'none'} 
    .navigation.open{display:'block'}

來源

2014-04-10 10:40:09 Bellash

第一：它是不允許直接擁有IMG標籤UL標籤內。這是一個工作的代碼有一些修改的例子：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Hiding/showing navigation</title> 

<style> 
.closed{ 
    display: none; 
    } 
</style> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(function(){ 
    $("nav").click(function(){  
     $(".navigation").toggleClass('closed'); 
    }); 
}); 
</script> 

</head> 
<body> 
<nav> 
    <h1>The nav</h1> 
    <ul class="navigation">      
     <li class="n1"><a href="#home">Principal</a></li> 
     <li class="n2"><a href="#services">Serviços</a></li> 
     <li class="n3"><a href="#team">Equipa</a></li> 
     <li class="n4"><a href="#contact">Contactos</a></li> 
    </ul> 
    <span>Euclides Style | 965648044</span> 
</nav> 
</body> 
</html>

來源

2014-04-10 10:45:27 user3518647

從何時開始不允許？然後你認爲它的使用頻率更高。無論如何，感謝您的幫助 – uniqezor

隱藏點擊功能後的jquery菜單

回答

相關問題