在jQuery设置中,在第一次单击时停止默认传播的最佳方法是什么,如果用户在第一次单击时显示子菜单,则在第二次单击时恢复链接,或隐藏当前显示的子菜单(如果用户点击页面的任何其他部分我尝试了一些变体,但似乎没有任何工作:
$('.nav-bar li:has(ul)').on('click', function () {
var CheckForClasssub = $('.nav-bar li ul').hasClass('subshow');
if (CheckForClasssub) {
$('.subshow').hide('slow').removeClass('subshow');
} else {
$('.nav-bar li').on('click', function () {
var thisflyout = $(this).find('.flyout');
$(thisflyout).toggle('slow').addClass('subshow');
});
}
});
这是我目前的菜单结构:
<ul class="nav-bar">
<li>
<a href="http://google.com">google</a>
<a href="#" class="flyout"></a>
<ul>
<li><a href="http://google.com">test</a></li>
<li><a href="http://google.com">test</a></li>
<li><a href="http://google.com">test</a></li>
<li><a href="http://google.com">test</a></li>
<li><a href="http://google.com">test</a></li>
</ul>
</li>
<li><a href="http://google.com">google</a></li>
<li><a href="http://google.com">google</a></li>
<li><a href="http://google.com">google</a></li>
<li><a href="http://google.com">google</a></li>
</ul>
目前点击class="flyout"
切换子菜单,但我很乐意使用整个链接
/ * 更新 ** /
好的,这可以在第一次点击时显示,然后在第二次点击链接,但如果在其他任何地方点击该页面则不会隐藏...
$('.nav-bar li:has(ul)').on('click', function (e) {
var CheckForClasssub = $('.nav-bar li ul').hasClass('subshow');
if (CheckForClasssub) {
$('.subshow').hide('slow').removeClass('subshow');
} else {
var thisflyout = $(this).find('.flyout');
e.preventDefault();
$(thisflyout).show('slow').addClass('subshow');
}
});
/ * 更新 ** / 澄清要求:
用户单击菜单项,同时使用A链接作为父级,使用子菜单
ul > li + a > ul > li
如果这是第一次点击显示子菜单。
如果第二次点击直接通过relvant链接。
如果用户在显示子菜单的菜单项1上单击了一次,但决定单击另一个具有子菜单的父菜单项隐藏子菜单1显示子菜单2.
如果用户点击了菜单项1并决定点击页面上的任何其他位置,而不是带子菜单的菜单项,则隐藏打开的子菜单....
var submenucheck = $('.nav-bar li ul');
var submenucheckli = $('.nav-bar li a');
showHide = false;
function checkforsubsopen() {
// body...
$.each(submenucheck, function(el) {
/* iterate through array or object */
if($(this).hasClass('subshow')){
showHide = true;
}
});
return showHide;
}
$('.nav-bar li:has(ul)').on('click', function(e) {
var CheckForClasssub = $('.nav-bar li ul').hasClass('subshow');
if(CheckForClasssub){
}
else{
var thisflyout = $(this).find('.flyout');
e.preventDefault();
$(thisflyout).show('slow').addClass('subshow');
}
});
$(document).on('click', function(){
checkforsubsopen();
if(showHide){
$('.subshow').hide('slow').removeClass('subshow');
}
console.log(showHide);
});