JQuery click() 未触发

Question

在下面的示例中，顶级链接可以正常工作，但菜单第二级内的链接不能正常工作。 li 位于下拉列表中，但是当您单击时没有任何反应。它将执行隐藏命令，但不会显示 if 语句中所需的 div。我尝试使用 class 选择器和直接 ID，但没有任何效果。

代码：

 // Make buttons clickable
    $(".slideOut").hide();
    $("#mainText").show();
    // alert($('.selected').attr('class').split(' ')[1]);

    $(".navOpt").click(function() {
      // Remove selected from all others
      $(this).siblings().removeClass("selected");
      $(this).addClass("selected");
      $(".slideOut").hide();
      // Show appropriate div
      if ($(this).attr("id") == "main") {
        $("#mainText").show();
      }
      else if ($(this).attr("id") == "about") {
        $("#aboutText").show();
      }
      else if ($(this).attr("id") == "contact") {
        $("#contactText").show();
      }
      else if ($(this).attr("id") == "gallery") {
        $("#galleryText").show();
      }
      else if ($(this).child().child().attr("id") == "cakes") {
        $("#cakesText").show();
      }
    });

    $("#menu").hover(function() {
      $("#drop").show();
    });

    $("#cakes").click(function() {
      $("#cakesText").show();
    });

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Sweet Remedies</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
</head>
<body>
  <header>
    <span>Words</span>
    <h1 id="title">Sweet Remedies</h1>
  </header>
  <div id="wrapper">
    <div id="nav">
      <nav id="menuList">
        <ul>
          <li id="main" class="navOpt selected"><a href="#">Main</a></li>
          <li id="about" class="navOpt"><a href="#">About</a></li>
          <li id="contact" class="navOpt"><a href="#">Contact</a></li>
          <li id="gallery" class="navOpt"><a href="#">Gallery</a></li>
          <li id="menu" class="navOpt"><a href="#">Menu<span class="arrow">&#9660;</span></a>
            <ul id="drop">
              <li id="cakes" class="subMenu"><a href="#">Cakes</a></li>
              <li id="cupcakes" class="subMenu"><a href="#">Cupcakes</a></li>
              <li id="cookies" class="subMenu"><a href="#">Cookies</a></li>
              <li id="pies" class="subMenu"><a href="#">Pies</a></li>
              <li id="extras" class="subMenu"><a href="#">Extras</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
    <div id="mainText" class="slideOut">
      <p>Whether it be preparing or eating the baked yummy goodness afterwards, sometimes thats all you need to make a bad day completely turn around... and thats what we're here for.</p>
      <p>Sweet Remedies is a privately oened online bakery here to satisfy all of your baking needs. It is our goal to present a delectable experience to soothe your sweet tooth and/or be your baking provider for any event you may have. Thank you for visiting our site and we hope you have a sweet day.</p>
    </div>
    <div id="aboutText" class="slideOut">
      <p>This text is in the wrong section.</p>
    </div>
    <div id="contactText" class="slideOut">
      <p>Call me maybe?</p>
    </div>
    <div id="galleryText" class="slideOut">
      <p>Here are pictures of my things.</p>
    </div>
    <div id="cakesText" class="slideOut">
      <p>Cakes are great and stuff.</p>
    </div>
    <div id="cupcakesText" class="slideOut">
      <p>Cupcakes are super tasty.</p>
    </div>
    <div id="cookiesText" class="slideOut">
      <p>I can make lots of cookies.</p>
    </div>
    <div id="piesText" class="slideOut">
      <p>I have never made a pie in my life.</p>
    </div>
    <div id="extrasText" class="slideOut">
      <p>Extra words for extra items.</p>
    </div>
    <footer></footer>
  </div>
  <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Answer 1

// Make buttons clickable
    $(".slideOut").hide();
    $("#mainText").show();
    // alert($('.selected').attr('class').split(' ')[1]);

    $(".navOpt").click(function(e) {

      // Remove selected from all others
      $(this).siblings().removeClass("selected");
      $(this).addClass("selected");
      $(".slideOut").hide();
      // Show appropriate div
      if ($(this).attr("id") == "main") {
        $("#mainText").show();
      }
      else if ($(this).attr("id") == "about") {
        $("#aboutText").show();
      }
      else if ($(this).attr("id") == "contact") {
        $("#contactText").show();
      }
      else if ($(this).attr("id") == "gallery") {
        $("#galleryText").show();
      }
      else if ($(e.target).closest("li").attr("id") == "cakes") {
       $("#cakesText").show();
      }
    });

    $("#menu").hover(function() {
      $("#drop").show();
    });

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Sweet Remedies</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
</head>
<body>
  <header>
    <span>Words</span>
    <h1 id="title">Sweet Remedies</h1>
  </header>
  <div id="wrapper">
    <div id="nav">
      <nav id="menuList">
        <ul>
          <li id="main" class="navOpt selected"><a href="#">Main</a></li>
          <li id="about" class="navOpt"><a href="#">About</a></li>
          <li id="contact" class="navOpt"><a href="#">Contact</a></li>
          <li id="gallery" class="navOpt"><a href="#">Gallery</a></li>
          <li id="menu" class="navOpt"><a href="#">Menu<span class="arrow">&#9660;</span></a>
            <ul id="drop">
              <li id="cakes" class="subMenu"><a href="#">Cakes</a></li>
              <li id="cupcakes" class="subMenu"><a href="#">Cupcakes</a></li>
              <li id="cookies" class="subMenu"><a href="#">Cookies</a></li>
              <li id="pies" class="subMenu"><a href="#">Pies</a></li>
              <li id="extras" class="subMenu"><a href="#">Extras</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
    <div id="mainText" class="slideOut">
      <p>Whether it be preparing or eating the baked yummy goodness afterwards, sometimes thats all you need to make a bad day completely turn around... and thats what we're here for.</p>
      <p>Sweet Remedies is a privately oened online bakery here to satisfy all of your baking needs. It is our goal to present a delectable experience to soothe your sweet tooth and/or be your baking provider for any event you may have. Thank you for visiting our site and we hope you have a sweet day.</p>
    </div>
    <div id="aboutText" class="slideOut">
      <p>This text is in the wrong section.</p>
    </div>
    <div id="contactText" class="slideOut">
      <p>Call me maybe?</p>
    </div>
    <div id="galleryText" class="slideOut">
      <p>Here are pictures of my things.</p>
    </div>
    <div id="cakesText" class="slideOut">
      <p>Cakes are great and stuff.</p>
    </div>
    <div id="cupcakesText" class="slideOut">
      <p>Cupcakes are super tasty.</p>
    </div>
    <div id="cookiesText" class="slideOut">
      <p>I can make lots of cookies.</p>
    </div>
    <div id="piesText" class="slideOut">
      <p>I have never made a pie in my life.</p>
    </div>
    <div id="extrasText" class="slideOut">
      <p>Extra words for extra items.</p>
    </div>
    <footer></footer>
  </div>
  <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

child 不是 jQuery 函数，children 是。但是，如果您将 child 替换为 children，由于 jQuery 的性质，此条件将始终呈现为真。它将循环所有元素，然后检查是否有 id 为 cakes 的元素。所有点击都会发生。

所以我们需要检查点击的元素是否是那个。因此我们可以使用事件对象。

在函数参数中使用 e 作为对事件的引用。这将引用触发的事件。 target 是被点击的元素。将其包装在 jQuery 函数中。用 closest 找到它的 parent/or 本身并收集。 id.

$(e.target).closest("li").attr("id")

这是正确的。

Answer 2

您仍在单击嵌套在 .navOpt 内的锚标记，该标记具有 href="#" 并触发页面刷新。这也是示例跳转到页面顶部的原因。

改变

<li id="menu" class="navOpt"><a href="#">Menu<span class="arrow">&#9660;</span></a>

到

<li id="menu" class="navOpt"><span class="menu-link>Menu<span class="arrow">&#9660;</span></span>

显然，任何针对 <a> 现在是跨度的 css 都不起作用。改为将 class 应用于 <a> 和 <span>。

Answer 3

简化您的代码。并使用 .not('#menu.navOpt')

无需执行所有 if 语句，您只需获取点击的元素 ID 并使用它来显示他的特定 div

// Make buttons clickable
$(".slideOut, #mainText, #drop").hide();
// alert($('.selected').attr('class').split(' ')[1]);
    // use .not('#menu.navOpt') to make #menu not clickable you just need it to show the submenu on hover
    $(".navOpt").not('#menu.navOpt').click(function() {
      // Remove selected from all others
      $(this).siblings().removeClass("selected");
      $(this).addClass("selected");
      var getId = $(this).attr("id");  // get this element ID
        $('.slideOut').hide(); // hide all divs with class slideOut
        $('#'+getId+'Text').show(); // use the ID to show its div
    });

    $("#menu").hover(function() {
          $("#drop").show();
        });

    $("#cakes").on('click',function() {
        $('.slideOut').hide();
      $("#cakesText").show();
    });

DEMO

JQuery click() 未触发

JQuery click() not firing

html

javascript

jquery

html-lists