通过点击功能使用jQuery切换元素

Question

我想从单击功能中切换元素以隐藏和显示导航栏。 我可以使用下面的jQuery代码显示它，但是要切换它，它对我不起作用。

我试图做两个功能，一个要显示，另一个要隐藏，但是也没有用。

 $(function() { $(".navig-icon").click( function() { $(".second-nav").css("display", "block"); }, function() { $(".second-nav").css("display", "none"); } ); });

 <!-- The below line is added for the Stack Overflow snippet to work, it's not in the real code --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Real code: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="js/jquery-1.12.0.min.js"></script> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/jquery-1.10.2.min.js"></script> <link rel="shortcut icon" href="img/favicon.jpg" type="image/x-icon" /> <link rel="stylesheet" href="responsiveslides.css"> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="navig-icon"> <img src="img/navig-icon.png"> </div> <nav class="second-nav"> <ul class="second-nav-list"> <li><a href="index.html" class="active">Home</a> </li> <li><a href="aboutus.html">About us</a> </li> <li><a href="products.html">Products</a> <ul class="second-dropdwn"> <li class="second-sub1"><a href="#"> Product 1</a> <ul class="second-sub-list1"> <li><a href="#">sub p1</a> </li> </ul> </li> <li class="second-sub2"><a href="#"> product 2</a> <ul class="second-sub-list2"> <li><a href="#">sub p1</a> </li> </ul> </li> <li class="second-sub3"><a href="#">product 3</a> <ul class="second-sub-list3"> <li><a href="#">sub p1</a> </li> <li><a href="#">sub p1</a> </li> <li><a href="#">sub p1</a> </li> </ul> </li> </ul> </li> <li><a href="career.html">Career</a> </li> <li><a href="contactus.html">Contact us</a> </li> </ul> </nav> <script src="js/jq.js"></script> </body> </html>

Answer 1

代替这个：

$(".navig-icon").click(
    function() {
        $(".second-nav").css("display","block");
    },
    function() {
        $(".second-nav").css("display","none");
    }
);

您可以尝试使用吗？：

$(".navig-icon").click(
    function() {
        $(".second-nav").toggle();
    }
);

Answer 2

尝试这个

$('div.navig-icon img').on('click', function (e) {
    $('.second-nav').toggle();
}

通过点击功能使用jQuery切换元素

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-05-11 09:42:36

解决方案2
0 2016-05-11 09:50:50

通过点击功能使用jQuery切换元素

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-05-11 09:42:36

解决方案2 0 2016-05-11 09:50:50

解决方案1
3 已采纳 2016-05-11 09:42:36

解决方案2
0 2016-05-11 09:50:50