本文介绍了如何将jQuery.click仅应用于第一级项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我只需要将jQuery.click应用于第一级项目.我该怎么办?
I need to apply a jQuery.click to the first level items only. How do I do that?
这是我的清单:
<ul id="adminMenu">
<li id="A">
<h3><a href="">Item 1</a></h3>
</li>
<li id="B">
<h3>Item 2</h3>
<ul style="display: block;">
<li id="a1"> Sub Item 1 </li>
<li id="a2"> Sub Item 2 </li>
<li id="a3"> Sub Item 3 </li>
</ul>
</li>
<li id="C">
<h3>Item 3</h3>
<ul style="display: none;">
<li> Sub Item 4 </li>
<li> Sub Item 5 </li>
</ul>
</li>
</ul>
这是jQuery
jQuery('#adminMenu > li').click(function(){
alert('test');
});
更新
单击子菜单项时,仅当单击列表项A,B或C时,警报应该不触发.
UPDATE
The Alert should not fire when I click a Sub Menu item, only when I click list item A, B or C.
解决方案1
这是基于Marcels建议的工作代码.
SOLUTION 1
This is working code based on Marcels suggestion.
jQuery('#adminMenu > li > h3').click(function(e) {
var activeUL = jQuery("#adminMenu > li ul:visible");
var activeLI = jQuery("#adminMenu > li ul:visible").parent('li:first');
var clicked = jQuery(this).parent('li:first');
// Close submenu
activeUL.hide('fast');
// Open submenu
if( activeLI.attr('id') != clicked.attr('id') )
clicked.children('ul').show('fast');
});
解决方案2
这是基于Eyelids建议的工作代码.
SOLUTION 2
This is working code based on Eyelids suggestion.
jQuery('#adminMenu > li').click(function(e) {
var clicked = jQuery(e.target);
// Ensure we're checking which list item is clicked,
// other children should be allowed
if(!clicked.is('li') && clicked.parents('li').length > 0) {
// :first ensures we do not select higher level list items
clicked = clicked.parents('li:first');
}
// If clicked list item is a child of another list item, we'll exit here
if(!clicked.is('#adminMenu > li')) {
return;
}
var activeUL = jQuery("#adminMenu > li ul:visible");
var activeLI = jQuery("#adminMenu > li ul:visible").parent('li:first');
// Close submenu
activeUL.hide('fast');
// Open submenu
if( activeLI.attr('id') != clicked.attr('id') )
clicked.children('ul').show('fast');
});
谢谢大家!没有您的帮助,我将永远无法做到这一点! :)
Thanks guys! I would never have managed this without your help! :)
推荐答案
jQuery('#adminMenu > li').click(function(e) {
var clicked = jQuery(e.target);
// Ensure we're checking which list item is clicked,
// other children should be allowed
if(!clicked.is('li') && clicked.parents('li').length > 0) {
// :first ensures we do not select higher level list items
clicked = clicked.parents('li:first');
}
// If clicked list item is a child of another list item, we'll exit here
if(!clicked.is('#adminMenu > li')) {
return;
}
alert('test');
});
如果单击的列表项不是#adminMenu
的直接后代,则更新以退出.
Updated to exit if clicked list item is not an immediate descendant of #adminMenu
.
这篇关于如何将jQuery.click仅应用于第一级项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!