使用しているjqueryでリンク範囲をボタン全体にしたい

Question

お世話になります。

レスポンシブなナビを作成中で、下記jquery（stellarnav）を使用しているのですが、
スマホ時、下階層の+アイコン限定ではなく、ボタン全体にリンクを貼りたいのですが、
どこを触ればよいでしょうか？
文字数オーバーしてしまうので、htmlは省略しています（デモでご覧いただければ）

デモはこちら
http://vinnymoreira.com/stellarnav-js-demo/

/* mobile nav */
.stellarnav .menu-toggle { color: #777; padding: 15px; }
.stellarnav.mobile { position: static; }
.stellarnav.mobile.fixed { position: static; }
.stellarnav.mobile ul { position: relative; display: none; }
.stellarnav.mobile.active { padding-bottom: 0; }
.stellarnav.mobile.active > ul { display: block; }
.stellarnav.mobile ul { text-align: left; }
.stellarnav.mobile > ul > li { display: block; }
.stellarnav.mobile > ul > li > a { padding: 15px; }
.stellarnav.mobile ul { background: rgba(221, 221, 221, 1); }
.stellarnav.mobile ul ul { position: relative; opacity: 1; visibility: visible; width: auto; display: none; -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none; }
.stellarnav.mobile ul ul ul { left: auto; top: auto; }
.stellarnav.mobile li.drop-left ul ul { right: auto; }
.stellarnav.mobile li a { border-bottom: 1px solid rgba(255, 255, 255, .15); }
.stellarnav.mobile li.has-sub a { padding-right: 50px; }
.stellarnav.mobile.light li a { border-bottom: 1px solid rgba(0, 0, 0, .15); }
.stellarnav.mobile li a.dd-toggle { border: 0; } 
.stellarnav.mobile.light li a.dd-toggle { border: 0; }
.stellarnav.mobile .menu-toggle, .stellarnav.mobile .dd-toggle, .stellarnav.mobile .close-menu  { display: block; }
.stellarnav.mobile li.call-btn-mobile { border-right: 1px solid rgba(255, 255, 255, .1); box-sizing: border-box; }
.stellarnav.mobile li.call-btn-mobile, .stellarnav.mobile li.call-btn-location { display: inline-block; width: 50%; text-transform: uppercase; text-align: center; }
.stellarnav.mobile li.call-btn-mobile.full, .stellarnav.mobile li.call-btn-location.full { display: block; width: 100%; text-transform: uppercase; border-right: 0; text-align: left; }
.stellarnav.mobile li.call-btn-mobile i, .stellarnav.mobile li.call-btn-location i { margin-right: 5px; }
.stellarnav.mobile.light ul { background: rgba(255, 255, 255, 1); }
.stellarnav.mobile.dark ul { background: rgba(0, 0, 0, 1); }
.stellarnav.mobile.dark ul ul { background: rgba(255, 255, 255, .08); }
.stellarnav.mobile.light li.call-btn-mobile { border-right: 1px solid rgba(0, 0, 0, .1); }
.stellarnav.mobile.top { position: absolute; width: 100%; top: 0; left: 0; z-index: 9999; }
.stellarnav.mobile li.has-sub > a:after, .stellarnav.mobile li li.has-sub > a:after, .stellarnav.mobile li.drop-left li.has-sub > a:after { display: none; }
/* mobile nav */

(function($) {
	$.fn.stellarNav = function(options, width, breakpoint) {

		var $nav, $width, $breakpoint;
		nav = $(this);
		width = $(window).width();

		// default settings
		var settings = $.extend( {
			theme     : 'plain', // adds default color to nav. (light, dark)
			breakpoint: 768, // number in pixels to determine when the nav should turn mobile friendly
			phoneBtn: false, // adds a click-to-call phone link to the top of menu - i.e.: "18009084500"
	    		locationBtn: false, // adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/"
			sticky     : false, // makes nav sticky on scroll (desktop only)
			position: 'static', // 'static' or 'top' - when set to 'top', this forces the mobile nav to be placed absolutely on the very top of page 
			showArrows: true, // shows dropdown arrows next to the items that have sub menus
			closeBtn     : false, // adds a close button to the end of nav
			scrollbarFix: false // fixes horizontal scrollbar issue on very long navs
		}, options );

		return this.each( function() {

			// defines black or white themes
			if (settings.theme == 'light' || settings.theme == 'dark') {
				nav.addClass(settings.theme);
			}

			if (settings.breakpoint) {
				breakpoint = settings.breakpoint;
			}

			// adds a location page link to the beginning of nav
			if (settings.locationBtn) {
				
				if(!settings.phoneBtn) {
					var cssClass = 'full';
				} else {
					var cssClass = '';
				}

				var btn = '<li class="call-btn-location ' + cssClass + '"><a href="'+ settings.locationBtn +'"><i class="fa fa-map-marker"></i> Location</a></li>';
				nav.find('ul:first').prepend(btn);

			}

			// adds a click-to-call link to the beginning of nav
			if (settings.phoneBtn) {
				
				if(!settings.locationBtn) {
					var cssClass = 'full';
				} else {
					var cssClass = '';
				}

				var btn = '<li class="call-btn-mobile ' + cssClass + '"><a href="tel:'+ settings.phoneBtn +'"><i class="fa fa-phone"></i> Call us</a></li>';
				nav.find('ul:first').prepend(btn);

			}

			// Makes nav sticky on scroll
			if (settings.sticky) {
				navPos = nav.offset().top;			
				if(width >= breakpoint) {
					$(window).bind('scroll', function() {
				         if ($(window).scrollTop() > navPos) {
				             nav.addClass('fixed');
				         }
				         else {
				             nav.removeClass('fixed');
				         }
				    });
				}
			}

			if (settings.position == 'top') {
				nav.addClass('top');
			}

			if (!settings.showArrows) {
				nav.addClass('hide-arrows');
			}

			if (settings.closeBtn) {
				// adds a link to end of nav to close it
				nav.find('ul:first').append('<li><a href="#" class="close-menu"><i class="fa fa-close"></i> Close Menu</a></li>');
			}

			if (settings.scrollbarFix) {
				$('body').addClass('stellarnav-noscroll-x');
			}
					
			// adds the toggle button to open and close nav 
			nav.prepend('<a href="#" class="menu-toggle"><i class="fa fa-bars"></i> Menu</a>');

			// opens and closes menu			
			$('.menu-toggle').on('click', function(e) {
				e.preventDefault();
				nav.find('ul:first').stop(true, true).slideToggle(250);
				nav.toggleClass('active');
			});

			// actives the close button
			$('.close-menu').click(function() {
				nav.find('ul:first').stop(true, true).slideUp(250).toggleClass('active');
				nav.removeClass('active');
			});
			

			// adds toggle button to li items that have children
			nav.find('li a').each(function() {
				if ($(this).next().length > 0) {
					$(this).parent('li').addClass('has-sub').append('<a class="dd-toggle" href="#"><i class="fa fa-plus"></i></a>');
				}
			});

			// expands the dropdown menu on each click 
			nav.find('li .dd-toggle').on('click', function(e) {
				e.preventDefault();
				//$(this).parent('li').toggleClass('hover');
				$(this).parent('li').children('ul').stop(true, true).slideToggle(250);
				$(this).parent('li').toggleClass('open');
			});

			var resetTriggers = function() {
				nav.find('li').unbind('mouseenter');
				nav.find('li').unbind('mouseleave');
			}
			
			var setTriggers = function() {
				nav.find('li').on('mouseenter', function(){
					$(this).addClass('hover');
					$(this).children('ul').stop(true, true).slideDown(250);
				});
				nav.find('li').on('mouseleave', function(){
					$(this).removeClass('hover');
					$(this).children('ul').stop(true, true).slideUp(250);
				});
			}
			windowCheck();
			
			// check browser width in real-time
			function windowCheck() {
				var browserWidth = window.outerWidth;
				
				if(browserWidth <= breakpoint) {
					// mobile/tablet nav
					
					resetTriggers();
					nav.addClass('mobile');
					nav.removeClass('desktop');

					// closes the menu when resizing window back to desktop
					if( !nav.hasClass('active') && nav.find('ul:first').is(':visible') ) {
						//nav.addClass('active');
						nav.find('ul:first').hide();
					}

				} else {
					// desktop nav
					nav.addClass('desktop');					
					nav.removeClass('mobile');

					if(nav.hasClass('active')) {
						nav.removeClass('active');
					}

					// ensures stellarnav is visible after resizing window
					if( !nav.hasClass('active') && nav.find('ul:first').is(':hidden') ) {
						nav.find('ul:first').show();
					}

					// hides items that were open on mobile
					$('li.open').removeClass('open').find('ul:visible').hide();

					resetTriggers();
					setTriggers();
				}
			}

			$(window).on('resize', function() {
				windowCheck();
			});
		});
	}
}(jQuery));

Answer 1

下の階層があるときには「+」ボタンが自動付加されるので、その仕組みを使って動作を付け加えるといいと思います。

jQuery('.stellarnav').stellarNav({ // stellarNav を設定
	theme: 'dark'
})
.find(".dd-toggle").siblings("a").on("click", function(){ // 下の階層があるリンクをクリックした時の動作
	$(this).siblings(".dd-toggle").click(); // 「+」アイコンをクリックする
	return false;
});

Comments

[退会済みユーザー]

大変助かりました！ありがとうございました。