點擊活動菜單上的類

當我點擊一個父菜單（如Domains）時，它會顯示它的子項，當我點擊其中的一個（比如My Domains）時，頁面會在父菜單關閉時重新加載（不擴展作爲圖像波紋管）點擊活動菜單上的類

的類是「主動」的菜單激活（藍色背景）和「打開」可見孩子

Bug

這些都是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

來源

2013-09-26 Lucas Bustamante

如果您加載頁面並輸入以下內容，則在con唯一的，你會看到它的工作原理如你所想：

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-26 06:16:14 Shea

它完美的作品Shea！謝謝！！！ –

不客氣:) – Shea

使用event.preventDefault()

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

參考event.preventDefault()

來源

2013-09-26 04:19:57

謝謝你的嘗試，很遺憾沒有工作 –

e.preventDefault（）;並使用e.stopPropagation（）;也 –

喜歡這個？「event.preventDefault（）; event.stopPropagation（）;」仍然是不行：/ –

在CSS就可以顯示/隱藏DIV當菜單項活動

來源

2013-09-26 04:59:29 kkiran

點擊活動菜單上的類

回答

相關問題