[英]Can't show content text from menu using jQuery
我正在尝试使用jQuery创建一个子菜单。 这个想法是,当有人点击第一个菜单时会出现一个子菜单,然后当有人点击子菜单时它会消失并显示一个包含信息的div,但我无法使其正常工作。
这是我的HTML:
<ul id="menu">
<li>
<a href="#">Item 1</a>
<ul id="submenu">
<li><a href="#" data-menu="show1">Sub menu 1</a></li>
<li><a href="#" data-menu="show2">Sub menu 2</a></li>
</ul>
</li>
</ul>
<div id="show1" class="content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div>
<div id="show2" class="content">Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri </div>
这是我的jQuery:
$(document).ready(function () {
$('#menu li ').click(function () {
$('#submenu').fadeToggle();
$('.content').fadeOut();
});
$('ul#submenu li a').click(function () {
var menu = $(this).data("menu");
$('#' + menu).fadeIn();
});
});
这个想法很简单,如果单击菜单,所有内容div必须隐藏,子菜单必须切换(显示隐藏,隐藏,如果显示。)单击子菜单项时,子菜单必须隐藏,并且单击与数据属性匹配的内容div必须出现。
但是,当我单击子菜单项时,它会暂时显示内容,然后它就会消失。 对我做错了什么的想法?
这是小提琴: https : //jsfiddle.net/yab34zdw/
单击子菜单项时,将触发这两个事件处理程序。 问题出在您的选择器上:
$('#menu li ')
也捕获子菜单项,它们也是菜单后代的<li>
标签。 您可以将选择器更改为$("#menu > li")
,它只捕获直接后代(子),但我认为通常它更好地添加类,并使用更简单的选择器。
HTML
<ul id="menu">
<li class="menu-top-item>
<a class="menu-top-item-link" href="#">Item 1</a>
<ul id="submenu">
<li class="menu-sub-item">
<a class="menu-sub-item-link" href="#" data-menu="show1">Sub menu 1</a>
</li>
<li class="menu-sub-item">
<a class="menu-sub-item-link" href="#" data-menu="show2">Sub menu 2</a>
</li>
</ul>
</li>
</ul>
Javascript 小提琴
$('.menu-top-item-link').click(function () {
$('#submenu').fadeToggle();
$('.content').fadeOut();
return false;
});
$('.menu-sub-item-link').click(function () {
var menu = $(this).data("menu");
$('#' + menu).fadeIn();
return false;
});
我不确定我是否得到了你想要的东西但是玩这个小调整来看看它是否更接近你描述的内容。 我认为这两个点击功能都针对您的子菜单内容。
$(document).ready(function () { $('#menu .menu ').click(function () { $('#submenu').fadeToggle(); $('.content').fadeOut(); }); $('ul#submenu li a').click(function () { var menu = $(this).data("menu"); $('#' + menu).fadeToggle(); }); })
<ul id="menu"> <li> <a href="#" class="menu">Item 1</a> <ul id="submenu"> <li><a href="#" data-menu="show1">Sub menu 1</a></li> <li><a href="#" data-menu="show2">Sub menu 2</a></li> </ul> </li> </ul> <div id="show1" class="content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div> <div id="show2" class="content">Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.