jQuery click（）无法触发
[英]JQuery click() not firing
问题描述
在以下示例中，顶级链接可以正常工作，但菜单第二级内部的链接却无法正常工作。 li位于下拉列表中，但是当您单击时没有任何反应。 它将执行hide命令，但不会从if语句中显示所需的div 。 我试图使用类选择器和直接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">▼</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 个解决方案
解决方案1
2 2015-07-29 22:10:35
// 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">▼</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是。 不过，如果你换成孩子children这种状况将一直呈现真实的，因为jQuery的性质。 它将循环所有元素，然后检查是否有一个ID cakes 。 发生在所有点击上。
因此，我们需要检查clicked元素是否为一个。 因此，我们可以使用事件对象。
在函数参数中使用e作为对该事件的引用。 这将涉及触发的事件。 target是被单击的元素。 将其包装在jQuery函数中。 找到closest父代或自身并收集。 ID。
$(e.target).closest("li").attr("id")
这是正确的。
解决方案2
1 已采纳 2015-07-29 22:19:48
简化您的代码。并使用.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();
});
解决方案3
0 2015-07-29 22:14:22
您仍在单击嵌套在.navOpt内的锚标签，该锚标签具有href="#"并触发页面刷新。 这就是为什么该示例跳至页面顶部的原因。
更改
<li id="menu" class="navOpt"><a href="#">Menu<span class="arrow">▼</span></a>
至
<li id="menu" class="navOpt"><span class="menu-link>Menu<span class="arrow">▼</span></span>
显然，任何以<a>为目标的css现在都不能使用。 定位到同时应用于<a>和<span> 。
jQuery单击不触发按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.