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 个答案: