javascript - 为什么不在 WordPress 的 Bootstrap 下拉列表中显示所选元素？

Question

我不明白为什么在 WordPress 的 Bootstrap 下拉菜单中不显示所选元素？我的网站: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 事件菜单项应该获得样式.. 这不包括您的下拉菜单。 . 只需转到您的 style.css第 81 行并更改此:

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

为此:

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