1

在 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

如果这是第一次单击显示子菜单。

如果第二次点击直接通过相关链接。

如果用户在显示子菜单的菜单项 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);
});
4

0 回答 0