使父级链接在Bootstrap和WordPress中可点击

Question

我希望顶层菜单项(鼠标移到上面以显示下拉菜单)是可点击的。这意味着，当你点击它们时，它们会进入一个网页，而不是只显示下拉菜单。

我发现了一堆不适合我的解决方案，可能是因为我从互联网上复制了一堆自定义代码，以便尝试使下拉菜单出现在悬停和淡出-我是一个相对的新手。(如果有更好的方法让下拉渐变，我洗耳恭听)。此外，简单的解决方案，如剥离类，数据切换等，似乎不适合我，因为我在WP中建立了一个自定义主题。我可能没有正确使用它们。

我也很好下拉菜单不能在移动设备上工作，我不在移动设备上使用它们。

谢谢!

.dropdown .dropdown-menu{
    display: block;
    opacity: 0;
    -moz-transition:    all 1000ms ease;
    -webkit-transition: all 1000ms ease;
    -o-transition:      all 1000ms ease;
    -ms-transition:     all 1000ms ease;
    transition:         all 1000ms ease;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}
.caret {
  display: none;
}
.navbar-default {
  background: transparent;
  border: 0px;
}
.navbar-default .navbar-collapse {
  text-align: center;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  border: 0px;
  overflow: hidden;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover {
  background: rgba (0,0,0,0);
  color: #ffffff;
}
.nav > li {
  padding: 0px 0px 0px 30px;
}
.navbar-default .navbar-nav > li > a {
  color: #ffffff;  
}
.navbar-default .navbar-nav > li > a:hover {
  color: #ffffff;
  text-align: center;
}
.navbar-default .navbar-nav > li > a:after {
  content:"2588 0a0 0a0 0a0 0a0 2588 0a0 0a0 0a0 0a0 2588";
  color: #f7981b;
  font-size: 1px;
  padding-top: 4px;
  padding-left: 10px;
  text-indent: -10px;
  display: block;
  visibility: hidden;
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
}
.navbar-default .navbar-nav > li > a:hover:after {
  content:"2588 0a0 0a0 0a0 0a0 2588 0a0 0a0 0a0 0a0 2588";
  font-size: 10px;
  padding-top: 4px;
  padding-left: 10px;
  text-indent: -10px;
  display: block;
  color: #f7981b;
  visibility: visible;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.nav > li > ul {
  position: absolute;
  padding: 0px;
  background: rgba(61,33,15,0.8);
  list-style: none;
}
.nav > li > ul > li {
  padding: 10px 30px;
  color: #ffffff;
  line-height: 20px;
}
.nav > li > ul > li:hover {
  background-color: #f7981b;
  color: #ffffff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.nav > li > ul > li > a:hover {
  background-color: #f7981b;
  color: #ffffff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.navbar-nav > li > .dropdown-menu {
  text-align: center;
}
.nav > li > ul > li > a {
  color: #ffffff;
  background: rgba(0,0,0,0,);
}
.nav > li > ul > li > a:hover {
  color: #ffffff;
  background: rgba(0,0,0,0);
  text-decoration: none;
}
.dropdown-menu > li > a {
  white-space: normal;
} 
.dropdown {
  text-align:center;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  background: rgba(0,0,0,0);
}
.button, .dropdown-menu {
  margin:0px auto
}
.dropdown-menu {
  width:180px; 
  left:50%; 
  margin-left:-85px;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover {
  background: rgba(0,0,0,0)!important;
  color: #ffffff!important;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover {
  background: rgba(0,0,0,0);
}

<div class="flex-container brown-80 hcenter">
            <div class="container-1300 pad-10 vcenter hcenter-nav">
              <div class="navbar-header brown-80">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="position: absolute; margin-left: -50px;">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
              </div>
        </div>
        <div class="container-1300 pad-10 vcenter hcenter-lg flex-container">
          <div class="flex-10-percent hcenter">
              <a href="/" class="logo-bg"></a>
          </div>
          <div class="flex-90-percent vcenter hcenter">
              <div class="collapse navbar-collapse fright-lg" id="bs-example-navbar-collapse-1">
                  <?php
                    wp_nav_menu( array(
                        'menu'              => 'header-menu',
                        'theme_location'    => 'header-menu',
                        'depth'             => 3,
                        'container'         => false,
                        'menu_class'        => 'nav navbar-nav',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>
              </div><!-- /.navbar-collapse -->
           </div>
       </div>  

Answer 1

我找到了一个修复。在我的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 : '';
}