JQuery click（）没有触发

时间：2015-07-29 22:00:02

标签： javascript jquery html html-lists

在下面的示例中，顶级链接工作正常，但菜单第二级内的链接却没有。 li是在下拉列表中，但是当您点击时没有任何反应。它将执行hide命令，但不会从div语句中显示所需的if。我试过使用类选择器和直接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>

3 个答案:

答案 0 :(得分：2)

＆＃13;
＆＃13; 
// 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();
    });
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

child不是jQuery函数，children是。但是，如果用children替换child，由于 jQuery 的性质，此条件将始终呈现为true。它将循环所有元素，然后检查是否存在标识为cakes的元素。它发生在所有点击上。

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

在函数参数中使用e作为对事件的引用。这将引用触发的事件。 target是被点击的元素。将其包装在jQuery函数中。使用closest查找其父/或其自身并收集。 id。

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

这是正确的。

答案 1 :(得分：1)

简化您的代码。并使用 .not（'＃menu.navOpt'）

而不是做所有这些，如果你可以获得点击的元素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

答案 2 :(得分：0)

您仍然会点击嵌套在 Downloading: http://scala-tools.org/repo-releases/org/apache/mahout/mahout-core/0.10.1/mahout-core-0.10.1.pom Downloading: http://mvnrepository.com/org/apache/mahout/mahout-core/0.10.1/mahout-core-0.10.1.pom Downloading: https://repo.maven.apache.org/maven2/org/apache/mahout/mahout-core/0.10.1/mahout-core-0.10.1.pom [WARNING] The POM for org.apache.mahout:mahout-core:jar:0.10.1 is missing, no dependency information available Downloading: http://scala-tools.org/repo-releases/org/apache/mahout/mahout-mr/0.10.1/mahout-mr-0.10.1.pom Downloading: http://mvnrepository.com/org/apache/mahout/mahout-mr/0.10.1/mahout-mr-0.10.1.pom Downloading: https://repo.maven.apache.org/maven2/org/apache/mahout/mahout-mr/0.10.1/mahout-mr-0.10.1.pom Downloaded: https://repo.maven.apache.org/maven2/org/apache/mahout/mahout-mr/0.10.1/mahout-mr-0.10.1.pom (7 KB at 4.8 KB/sec) Downloading: http://scala-tools.org/repo-releases/org/apache/mahout/mahout-hdfs/0.10.1/mahout-hdfs-0.10.1.pom Downloading: http://mvnrepository.com/org/apache/mahout/mahout-hdfs/0.10.1/mahout-hdfs-0.10.1.pom Downloading: https://repo.maven.apache.org/maven2/org/apache/mahout/mahout-hdfs/0.10.1/mahout-hdfs-0.10.1.pom Downloaded: https://repo.maven.apache.org/maven2/org/apache/mahout/mahout-hdfs/0.10.1/mahout-hdfs-0.10.1.pom (6 KB at 10.5 KB/sec) Downloading: http://scala-tools.org/repo-releases/org/apache/mahout/mahout-core/0.10.1/mahout-core-0.10.1.jar Downloading: http://scala-tools.org/repo-releases/org/apache/mahout/mahout-hdfs/0.10.1/mahout-hdfs-0.10.1.jar Downloading: http://scala-tools.org/repo-releases/org/apache/mahout/mahout-mr/0.10.1/mahout-mr-0.10.1.jar Downloading: http://mvnrepository.com/org/apache/mahout/mahout-core/0.10.1/mahout-core-0.10.1.jar Downloading: http://mvnrepository.com/org/apache/mahout/mahout-hdfs/0.10.1/mahout-hdfs-0.10.1.jar Downloading: http://mvnrepository.com/org/apache/mahout/mahout-mr/0.10.1/mahout-mr-0.10.1.jar Downloading: https://repo.maven.apache.org/maven2/org/apache/mahout/mahout-core/0.10.1/mahout-core-0.10.1.jar Downloading: https://repo.maven.apache.org/maven2/org/apache/mahout/mahout-hdfs/0.10.1/mahout-hdfs-0.10.1.jar Downloading: https://repo.maven.apache.org/maven2/org/apache/mahout/mahout-mr/0.10.1/mahout-mr-0.10.1.jar Downloaded: https://repo.maven.apache.org/maven2/org/apache/mahout/mahout-hdfs/0.10.1/mahout-hdfs-0.10.1.jar (26 KB at 18.4 KB/sec) Downloaded: https://repo.maven.apache.org/maven2/org/apache/mahout/mahout-mr/0.10.1/mahout-mr-0.10.1.jar (1378 KB at 655.4 KB/sec) [INFO] ------------------------------------------------------------------------ [INFO] BUILD FAILURE [INFO] ------------------------------------------------------------------------ [INFO] Total time: 12.254 s [INFO] Finished at: 2015-07-29T14:53:38-07:00 [INFO] Final Memory: 13M/491M [INFO] ------------------------------------------------------------------------ [ERROR] Failed to execute goal on project classifier: Could not resolve dependencies for project com.collabware:classifier:jar:1.0-SNAPSHOT: Could not find artifact org.apache.mahout:mahout-core:jar:0.10.1 in scala-tools.org (http://scala-tools.org/repo-releases) -> [Help 1] [ERROR] .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> 的css现在都是一个跨度的工作。定位一个类，而不是应用于<a>和<a>。

相关问题
最新问题