Bootstrap: Как мне сделать Dropdown navigation Родительские ссылки активны?

Question

Я запускаю Bootstrap на WP-установке и имею проблему с удалением url из родительского элемента drop down nav.

Вот код. В menu-item-72 вы можете видеть, что href для нашей команды - это просто # вместо правильной ссылки.

<ul id="menu-primary" class="nav navbar-nav"> 
<li id="menu-item-69" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-69"><a title="Home" href="http://mostellar.opteradev.com/">Home</a></li> 
<li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-70 active"><a title="About Us" href="http://mostellar.opteradev.com/us/">About Us</a></li> 
<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-72 dropdown"><a title="Our Team" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Our Team <span class="caret"></span></a> 
    <ul role="menu" class=" dropdown-menu"> 
    <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a title="Katherine M. Conwell, CPA" href="http://mostellar.opteradev.com/katherine-m-conwell/">Katherine M. Conwell, CPA</a></li> 
    <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a title="Ann S. Bowers, CPA" href="http://mostellar.opteradev.com/our-team/ann-s-bowers/">Ann S. Bowers, CPA</a></li> 
    <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a title="John B. Mostellar, CPA" href="http://mostellar.opteradev.com/our-team/john-b-mostellar/">John B. Mostellar, CPA</a></li> 
    <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a title="Lewis T. Shreve, CPA" href="http://mostellar.opteradev.com/our-team/lewis-t-shreve/">Lewis T. Shreve, CPA</a></li> 
</ul> 
</li> 
</ul> 

Что не хватает для этого, чтобы заставить его работать? Я подтвердил, что элемент связан с активной записью.

Answer 1

По умолчанию родительские элементы начальной загрузки в раскрывающемся списке не могут быть изменены. Добавить этот скрипт на страницу, и теперь они будут:

<script> 
jQuery(function($) { 
$('.navbar .dropdown').hover(function() { 
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); 

}, function() { 
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp(); 

}); 

$('.navbar .dropdown > a').click(function(){ 
location.href = this.href; 
}); 

}); 
</script> 

Кредит на это решение идет в http://wpeden.com/tipsntuts/twitter-bootstrap-dropdown-on-hover-and-activating-click-event-on-parent-item/

Answer 2

Для меня это сработало так: Я предполагаю, что вы делаете использование WP-самозагрузки-navwalker

Откройте файл wp-bootstrap-navwalker.php с вашим редактором и найдите линию ок.

// If item has_children add atts to a. 
if ($args->has_children && $depth === 0) { 
    $atts['href']  = '#'; 
    $atts['data-toggle'] = 'dropdown'; 
    $atts['class']   = 'dropdown-toggle'; 
} else { 
    $atts['href'] = ! empty($item->url) ? $item->url : ''; 
} 

Изменить этот кусок кода:

// If item has_children add atts to a. 
if ($args->has_children && $depth === 0) { 
    $atts['href'] = ! empty($item->url) ? $item->url : ''; 
    //$atts['data-toggle'] = 'dropdown'; 
    $atts['class']   = 'dropdown-toggle'; 
} else { 
    $atts['href'] = ! empty($item->url) ? $item->url : ''; 
} 

Примечание: $ АТТ [ 'HREF'] включен в настоящее время, то в $ ATTS [ 'данные тумблера'] отключены, которая делает родительская ссылка.

Теперь откройте свой стиль.css и добавьте этот фрагмент кода, чтобы активировать функцию наведения для вашего меню WordPress с выпадающим и интерактивным родителем.

.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
}

Примечание: Поведение меню немного изменится на небольших устройствах с небольшими экранами. Никаких дополнительных jQuery не требуется.

Answer 3

Вы можете установить это, удалив data-toggle = "dropdown" и установив data-hover = "dropdown".

Answer 4

Чтобы добавить к раствору Sohail Куреши, я изменил файл немного больше, а вот способ, который преобразует исходную ссылку к фактической ссылке:

в в.ч.-самозагрузке-navwalker.php, изменить этот кусок кода:

// If item has_children add atts to a. 
if ($args->has_children && $depth === 0) { 
    $atts['href']  = '#'; 
    $atts['data-toggle'] = 'dropdown'; 
    $atts['class']   = 'dropdown-toggle'; 
} else { 
    $atts['href'] = ! empty($item->url) ? $item->url : ''; 
} 

к:

// If item has_children add atts to a. 
    if ($args->has_children && $depth === 0) { 
     $atts['href']   = ($item->url); 
     $atts['data-toggle'] = 'dropdown'; 
     $atts['class']   = 'dropdown-toggle disabled'; 
     $atts['aria-haspopup'] = 'true'; 
    } else { 
     $atts['href'] = ! empty($item->url) ? $item->url : ''; 
    } 

и теперь родительская ссылка кликабельна и на самом деле ссылка на страницу!

Answer 5

Простота в использовании ниже кода для интерактивных ссылок в drapdown

onClick="parent.location='http://www.plus2net.com/'" 

Answer 6

// Ого !!! Этот код работает правильно. Просто вставьте его в нужное место в своем проекте. // Если элемент has_children добавляет atts к.

if ($args->has_children && $depth === 0) { 
    $atts['href'] = ! empty($item->url) ? $item->url : ''; 
    //$atts['data-toggle'] = 'dropdown'; 
    $atts['class']   = 'dropdown-toggle'; 
} else { 
    $atts['href'] = ! empty($item->url) ? $item->url : ''; 
}