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

Question

我希望顶层菜单项(您将鼠标悬停在其上以显示下拉菜单)是可点击的。这意味着，当你点击它们时，它们会转到一个网页，而不仅仅是显示下拉菜单。

我已经找到了一堆对我不起作用的解决方案，可能是因为我从互联网上复制了一堆自定义代码，试图让下拉菜单显示在悬停和淡入-我是一个相对新手。(如果有更好的方法让下拉菜单淡入，我洗耳恭听)。此外，简单的解决方案，如剥离类，数据切换等，似乎不适合我，因为我在可湿性粉剂中建立了一个自定义主题。我可能没有正确地使用它们。

另外，我对dropdowns在移动设备上不工作也没意见，我不会在手机上使用它们。

谢谢!

.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 \00a0 \00a0 \00a0 \00a0 \2588 \00a0 \00a0 \00a0 \00a0 \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 \00a0 \00a0 \00a0 \00a0 \2588 \00a0 \00a0 \00a0 \00a0 \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 : '';
}