Question

在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);
});

触摸设备悬停到子菜单的双击？

0 个答案: