4

親メニュー (ドメインなど) をクリックすると、その子が表示されます。そのうちの 1 つ (マイ ドメインなど) をクリックすると、親メニューが閉じた状態でページがリロードされます (下の画像のように展開されていません)。

クラスは、メニュー アクティブ (青色の背景) の場合は「アクティブ」で、表示されている子の場合は「オープン」です。

バグ

これらはJSコードです：

  // Handle clicking on the naviagtion dropdown items
  jQuery('.navbar .toggle > a').click(function() {
    if (!jQuery(this).next().is(":visible")) {
      jQuery('.toggle a').removeClass('open');
      jQuery('.toggle ul:visible').hide();
    }
    jQuery(this).toggleClass('open');
    jQuery(this).next().slideToggle();
  });

  // Tabs Changer
  // ===============================
    //Default Action
    jQuery(".tab-content").hide(); //Hide all content
    if (jQuery(location).attr('hash').substr(1)!="") {
        var activeTab = jQuery(location).attr('hash');
        jQuery("ul").find('li').removeClass('open');
        jQuery("ul.nav li").removeClass("active"); //Remove any "active" class
        jQuery(activeTab+"nav").addClass("active");
        jQuery(activeTab).show();
    } else {
        jQuery("#tabs ul.nav .nav-tabs li:first").addClass("active").show(); //Activate first tab
        jQuery(".tab-content:first").show(); //Show first tab content
    }

    //On Click Event
    jQuery("#tabs ul.nav li").click(function() {
        jQuery("ul").find('li').removeClass('open');
        jQuery("ul.nav li").removeClass("active"); //Remove any "active" class
        jQuery(this).addClass("active"); //Add "active" class to selected tab
        var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        if (activeTab.substr(0,1)=="#" && activeTab.substr(1)!="") { //Determine if a tab or link
            jQuery(".tab-content").hide(); //Hide all tab content
            jQuery(activeTab).fadeIn(); //Fade in the active content
            return false;
        } else {
            return true; // If link allow redirect
        }
    });

});

ログインをクリックして、メニューの実例をご覧ください: https://whmcsdesigns.com/demo/clientarea.php?action=domains

4

3 に答える 3

2

ページを読み込んでコンソールに次のように入力すると、期待どおりに動作することがわかります。

jQuery(".navbar .toggle.active > .nav-link").addClass('open'); 
jQuery(".navbar .toggle.active > ul").css('display', 'block');

ただし、これによりタイミングの問題が発生する場合があります。でラップするのはベスト プラクティスではありませんjQuery(window).onが、作業は完了します。

jQuery(window).on('load', null, {}, function () { 
    jQuery(".navbar .toggle.active > .nav-link").addClass('open'); 
    jQuery(".navbar .toggle.active > ul").css('display', 'block'); 
});

通常は同期的に実行する必要がありますが、機能させるために、window.onloadすべての読み込みが完了したときにこのコードを実行します。これにより、メニューがこのコードを受け入れる準備ができていると安全に想定できます。したがって、メニューが最初にセットアップされ、このコードの準備が整った後、これはかなり後で実行される可能性があります (ミリ秒単位で話している)。

于 2013-09-26T06:16:14.773 に答える