Bootstrapのnavbarで子ページを持つ親カテゴリをクリック→遷移できるようにする

Bootstrapのnavbarでは、子ページを持つ親カテゴリトップをクリックしたときの挙動は、dropdown-menu(子ページが)のリストが表示され、親カテゴリトップのページに遷移することはできません。

これを、親カテゴリを触った際に以下のように改造します。

  • hoverで子ページリスト表示
  • クリックで親カテゴリトップに遷移
jQuery(document).ready(function(){
	
	jQuery('li.menu-item-has-children').hover(function(){
		//console.log("dropdown-hover");
		if(window.matchMedia("only screen and (min-width: 768px)").matches){
			jQuery(this).closest(".dropdown").addClass("open");
		}
  	},function(){
  		//console.log("dropdown-un-hover");
  		if(window.matchMedia("only screen and (min-width: 768px)").matches){
  			jQuery(this).closest(".dropdown").removeClass("open");
  		}
  	});
  	
	jQuery("li.menu-item-has-children > a").click(function(e){
		var toplvl_url = jQuery(this).attr("href");
		if(window.matchMedia("only screen and (min-width: 768px)").matches){
			window.location.href = toplvl_url;
		}else{
			jQuery(this).closest("li.menu-item-has-children").addClass("open");
			jQuery("li.menu-item-has-children.open > a").on('click',function(){
				window.location.href = toplvl_url;
			});
		}
  	return false;
  	});
  });
共有
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Posts published: 45
Copyrights © idew. All Rights Reserved.