点击后隐藏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');
});

更新

我使用了一个简单的解决方案：

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

感谢大家的帮助！

hide()正在工作。尝试：

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

演示

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

或者你可以尝试.hide（）甚至.fadeOut（）；

假设开放类具有display: none或display: block属性（取决于启动状态）将正常工作。

也可以使用toggle函数。

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

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

你应该添加一些css

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

第一：不允许在ul标记中直接有img标记。这是一个经过一些修改的工作代码示例：

<!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>

hide();解决方案将完全隐藏菜单，下次不会再次显示，toggle解决方案将切换页面上的所有其他菜单，所以下面是我的解决方案，这种效果将应用于页面上的全部下拉菜单。

$(document).on("click",".dropdown-menu li a", function(){
    jQuery(this).parent('li').parent('ul').parent('div').removeClass('open');
});

相关内容

最新更新

热门标签：