1

jQuery設定で、最初のクリックでデフォルトの伝播を停止し、ユーザーが最初のクリックでサブメニューを表示し、2回目のクリックでリンクを復元するか、ユーザーがクリックした場合に現在表示されているサブメニューを非表示にする最良の方法は何ですか?ページの他の部分では、いくつかのバリエーションでこれを試しましたが、どれもうまくいかないようです:

$('.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"とサブメニューが切り替わりますが、リンク全体を使用したいと思います

/ *更新** /

これは、最初のクリックで表示し、2 番目のクリックでリンクをたどると問題なく動作しますが、ページが他の場所でクリックされた場合は非表示になりません...

$('.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

これが最初のクリックの場合は、サブメニューを表示します。

2 回目のクリックで、関連するリンクに直接アクセスできます。

ユーザーがサブメニューを表示しているメニュー項目 1 を 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