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 \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 : '';
}

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

1 个答案: