BootstrapVue框架集合

1.导航栏navbar

鼠标滑过既有下拉列表

效果图

以下代码段，toPage（pathName）是跳转页面的方法，

            
            
              

                
                
                  {{$t(item.text)}}
                
                

                

                  

                    
                        

                          
                          {{$t(item.text)}}
                        
                      
                        {{$t(child.text)}}
                      
                    
                  
                

              
            
          

navList只放了两个对象，只做例子示范，用jquery修改了一些样式。第一个对象首页是没有下拉列表的。我把首页的下拉列表禁止显示了。

//这是去掉下拉列表的三角形的覆盖样式
.gg:after {
    display: none !important;
  }

$(document).ready(function () {
    // navbar的样式修改
    $(".b-nav-dropdown").hover(function () {
      var $b = $($(this).children("ul")[0])               //$b为ul的jquery对象
      var $c = $($b.prev().children("span")[0])
      $b.addClass("show")
      $c.css('color', '#A60002')
      // $b.prev().css('backgroundColor', 'white')
    }, function () {
      var $b = $($(this).children("ul")[0])
      var $c = $($b.prev().children("span")[0])
      $c.css('color', 'black')
      $b.removeClass("show")
      // $b.prev().css('background', 'none')
    });

    $(".dropdown-toggle").addClass("gg");       //去除下拉列表的三角符号

    $(".navbar-toggler").css('backgroundColor', 'white')
    $($(".dropdown-menu-right")[0]).removeClass('dropdown-menu')
    $($(".dropdown-menu-right")[0]).css('display','none')
    $($(".dropdown-menu-right")[0]).removeClass('dropdown-menu-right')
  });

 navList: [
          {
            text: 'm.index',
            path: 'index',
          },
          {
            text: 'm.aboutUS',
            path: '',
            child: [
              {
                text: 'm.company',
                path: ''
              },
              {
                text: 'm.group',
                path: ''
              },
              {
                text: 'm.honor',
                path: ''
              },
              {
                text: 'm.position',
                path: ''
              },
              {
                text: 'm.videoCenter',
                path: ''
              }
            ]
          },
]