WordPressのブートストラップドロップダウンで選択した項目が表示されないのはなぜですか？

Question

WordPressのブートストラップドロップダウンメニューで選択した項目が表示されないのはなぜですか？私のサイト：http://nauglyahh.ru/en/blog/。 http://www.bootply.com/62811

私のメニューコード：

<?php 
     wp_nav_menu(array(
      'menu'    => 'dropdown', 
      'theme_location' => 'menu-6', 
      'depth'    => 2, 
      'container'   => 'div', 
      'container_class' => 'collapse navbar-collapse', 
      'container_id'  => 'bs-example-navbar-collapse-1', 
      'menu_class'  => 'nav navbar-nav', 
      'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
      'walker'   => new wp_bootstrap_navwalker()) 
     ); 
    ?> 

私のjavascriptのコード：

jQuery(document).ready(function() { 
    jQuery(".dropdown-menu li a").click(function(){ 
    jQuery(".dropdown-toggle").html(jQuery(this).text()+' <span class="caret"></span>'); 
    }); 

    jQuery(".dropdown-toggle").click(function(){ 
     jQuery('#blog').toggleClass('blogTranslateY'); 
    }); 

    jQuery(document).on("click", function(event){ 
    var dropdown = jQuery(".dropdown-toggle"); 
    if(dropdown !== event.target && !dropdown.has(event.target).length){ 
     jQuery('#blog').removeClass('blogTranslateY'); 
    } 
}); 

}) 

マイCSS：

.navbar-header ul { 
    padding: 0; 
    margin-top: 0; 
} 
.navbar-header li{ 
    list-style: none; 
    height: 40px; 
    line-height: 39px; 
    background-color: #eeeeee; 
    border-bottom: 1px solid #fff; 
    text-align: center; 
} 
.dropdown-menu { 
    display: none; 
} 
.dropdown-toggle::after { 
    content: ''; 
    background-image: url(img/arrow.png); 
    width: 15px; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    height: 9px; 
    position: absolute; 
    right: 2%; 
    top: 50%; 
    margin-top: -4px; 
    transition-duration: 0.4s; 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
} 

.dropup, 
.dropdown { 
    position: relative; 
} 
.navbar-nav { 
    padding: 0; 
} 
.bs-example-navbar-collapse-1 { 
    overflow: hidden; 
} 
.dropdown-menu { 
    top: 100%; 
    display: block; 
    visibility: hidden; 
    float: left; 
    width: 100%; 
    z-index: 1; 
    margin-top: 1px; 
    font-size: 14px; 
    text-align: left; 
    list-style: none; 
    background-color: #fff; 
    transition: all 0.5s ease-in; 
    transform: translateY(-200px); 
} 
.dropdown, a.dropdown-toggle { 
    position: relative; 
    z-index: 5; 
    background-color: #eeeeee; 
    border-bottom: 1px solid #fff; 
} 
.dropdown-menu .divider { 
    height: 1px; 
    margin: 9px 0; 
    overflow: hidden; 
    background-color: #e5e5e5; 
} 
.dropdown-menu > li > a { 
    display: block; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.42857143; 
    color: #333; 
    white-space: nowrap; 
    line-height: 37px; 
} 
.dropdown-toggle { 
    display: block; 
    text-decoration: none; 
} 
.navbar-header a { 
    text-decoration: none; 
} 
.navbar-header a:hover { 
    color: #209dd8; 
} 
.dropdown.open > .dropdown-toggle::after { 
    -webkit-transform:rotate(180deg); 
    transform: rotate(180deg); 
} 
.dropdown.open > .dropdown-menu { 
    transform: translateY(0); 
    visibility: visible; 
} 
.blogTranslateY { 
    transition-delay: 0s!important; 
    margin-top: 0!important; 
} 

Answer 1

だけでなく、私が発見したが、それは次のように動作するはずですあなたのスタイルファイルでCSSにこれに

.nav-category .current-menu-item , .current-menu-parent { 
    background-color: #fff!important; 
} 

：

.current-menu-item , .current-menu-parent { 
    background-color: #fff!important; 
} 

.nav-categoryアクティブなメニュー項目は、単にあなたの style.cssライン81に移動し、これを変更...あなたのドロップダウンメニューを含まない..スタイルを取得する必要があります