web-dev-qa-db-ja.com

ブートストラップ：ドロップダウンナビゲーションの親リンクをアクティブリンクにするにはどうすればよいですか？

Bootstrap on WPインストール時に実行していて、URLが親のドロップダウンナビゲーションアイテムから削除されるという問題があります。

これがコードです。 menu-item-72では、our-teamの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>

これを機能させるには何が欠けていますか？アイテムがアクティブなエントリに関連付けられていることを確認しました。

wordpresstwitter-bootstraptwitter-bootstrap-3navigation
9
fmz

デフォルトでは、bootstrapドロップダウンの親アイテムはクリックできません。このスクリプトをページに追加すると、次のようになります。

<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/ に送られます。

38
gigelsmith

私にとってはこのように機能しました：あなたはwp-bootstrap-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 : '';
}

注：$ att ['href']が有効になり、$ atts ['data-toggle']が無効になり、親リンクがクリック可能になります。

ここで、style.cssを開き、このコードを追加して、ドロップダウンとクリック可能な親を持つWordPressメニューのホバー機能をアクティブにします。

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

注：小さな画面の小さなデバイスでは、メニューの動作が少し異なります。追加のjQueryは必要ありません。

30
Sohail Qureshi

これを設定するには、data-toggle = "dropdown"を削除し、data-hover = "dropdown"を設定します。

10
ksg

Sohail Qureshiのソリューションに追加するために、ファイルを少し変更しました。親リンクを実際のリンクに変換する方法を次に示します。

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']           = ( $item->url );
        $atts['data-toggle']    = 'dropdown';
        $atts['class']          = 'dropdown-toggle disabled';
        $atts['aria-haspopup']  = 'true';
    } else {
        $atts['href'] = ! empty( $item->url ) ? $item->url : '';
    }

そして今、親リンクはクリック可能であり、実際にページにリンクしています！

3
user5890887

2018年5月、このソリューションは私にとってうまくいきました。

Class-wp-bootstrap-navwalker.phpファイルに移動します->コメント行185

// $atts['href']          = '#';

このコードを貼り付けます。

$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['data-toggle']   = 'hover';

楽しい。

2
Amir Ur Rehman

ドラップダウンのクリック可能なリンクのコードの下で使いやすい

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