Question

我有一个简单的功能来显示下拉菜单。

这是一个自适应菜单，它仅适用于我的媒体查询中定义的尺寸，这就是我想在点击后隐藏子菜单的原因。

我想点击其中一个链接，然后隐藏此下拉菜单。我知道.hide（）但是我无法让它工作。

任何帮助？

我想保持这段代码简单＆amp;干净。

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');
    });

感谢大家的帮助！

Answer 1

hide()正在运作。尝试：

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

DEMO

Answer 2

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

或者您可以尝试.hide（）甚至.fadeOut（）;

Answer 3

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

或者，您可以使用toggle功能。

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

Answer 4

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

你应该添加一些css

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

Answer 5

首先：不允许在ul-tag中直接使用img-tag。这是一个带有一些修改的工作代码示例：

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

Answer 6

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

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

点击功能后隐藏jquery菜单

6 个答案: