通过javascript更改菜单中显示的信息

Question

当我的大型菜单下拉时，我有 4 个选项卡。当前查看它设置为单击的每个选项卡。我试图改变这一点，所以将鼠标悬停在选项卡上会改变菜单中显示的信息。 当我将以下代码输入 www.bootply.com 时，它可以完美运行 但是在我的网站上不起作用。

标签

<ul class="nav nav-tabs" role="tablist">   
    <li class="active change"><a href="#Featured" role="tab" data-toggle="tab">Featured</a></li>
    <li class="change"><a href="#AtoC" role="tab" data-toggle="tab"># - C</a></li>
    <li class="change"><a href="#DtoL" role="tab" data-toggle="tab">D - L</a></li>
    <li class="change"><a href="#MtoP" role="tab" data-toggle="tab">M - P</a></li>
    <li class="change"><a href="#QtoZ" role="tab" data-toggle="tab">Q - Z</a></li>
</ul>

应该随着悬停而改变，但我仍然需要点击它们。 我无法弄清楚为什么代码在 bootply.com 上可以正常工作，但在我的网站上却不行

谁能帮忙？我正在使用 wordpress CMS

PHP：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="#"></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="navbar-collapse style= collapse in" id="bs-megadropdown-tabs" style="padding-left: 0px;">
            <ul class="nav navbar-nav">
                <li class="dropdown mega-dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-space-shuttle"></i> CATEGORIES <span class="caret"></span></a>              
                    <div id="filters" class="dropdown-menu mega-dropdown-menu">
                        <div class="container-fluid2">
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div class="tab-pane active" id="Featured">
                                    <ul class="nav-list list-inline">
                                        <li><a data-filter=".89" href="#"><img src="#"><span>ABC</span></a></li>
                                    </ul>
                                </div>
                                <div class="tab-pane" id="AtoC">
                                    <ul class="nav-list list-inline">                                
                                        <li><a data-filter=".38" href="#"><span>DEF</span></a></li>
                                    </ul>
                                </div>
                                <div class="tab-pane" id="DtoL">
                                    <ul class="nav-list list-inline">
                                        <li><a href="#"><span>HIL</span></a></li>
                                    </ul>
                                </div>
                                <div class="tab-pane" id="MtoP">
                                    <ul class="nav-list list-inline">
                                        <li><a href="#"><span>KLM</span></a></li>
                                    </ul>
                                </div>
                                <div class="tab-pane" id="QtoZ">
                                    <ul class="nav-list list-inline">
                                        <li><a href="#"><span>NOP</span></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">   
                            <li class="active change"><a href="#Featured" role="tab" data-toggle="tab">Featured</a></li>
                            <li class="change"><a href="#AtoC" role="tab" data-toggle="tab"># - C</a></li>
                            <li class="change"><a href="#DtoL" role="tab" data-toggle="tab">D - L</a></li>
                            <li class="change"><a href="#MtoP" role="tab" data-toggle="tab">M - P</a></li>
                            <li class="change"><a href="#QtoZ" role="tab" data-toggle="tab">Q - Z</a></li>
                        </ul>                    
                    </div>              
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

CSS：

.navbar-brand { 
    width: 70px;
    height: 50px;
    background: url('http://www.sneaker-
mission.com/uploads/3/1/2/7/31279819/5617441.png') no-repeat center center;
    background-size: 50px;  
  }
  .col-md-4{
      width:15%;
  }
  .nav-tabs {
    display: inline-block;
    border-bottom: none;
    padding-top: 0.5vw;
    font-weight: bold;
    border-top: 2px solid #d52027;
  }
  .nav-tabs > li > a, 
  .nav-tabs > li > a:hover, 
  .nav-tabs > li > a:focus, 
  .nav-tabs > li.active > a, 
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    border: none;
    border-radius: 0;
  }
  .nav-tabs > li > a{
      color:#d52027
  }
  .nav-list { border-bottom: px solid #eee; }
  .nav-list > li { 
    padding: 20px 15px 15px;

  }
  .nav-list > li:last-child { border-right: 0px solid #eee; }
  .nav-list > li > a:hover { text-decoration: none; }
  .nav-list > li > a > span {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
  }

  .mega-dropdown { position: static !important; }
  .mega-dropdown-menu {
    padding: 20px 15px 15px;
    text-align: center;
    width: 100%;
  }
  #login-dp{
      min-width: 250px;
      padding: 14px 14px 0;
      overflow:hidden;
      background-color:rgba(255,255,255,.8);
  }
  #login-dp .help-block{
      font-size:12px    
  }
  #login-dp .bottom{
      background-color:rgba(255,255,255,.8);
      border-top:1px solid #ddd;
      clear:both;
      padding:14px;
  }
  #login-dp .social-buttons{
      margin:12px 0    
  }
  #login-dp .social-buttons a{
      width: 49%;
  }
  #login-dp .form-group {
      margin-bottom: 10px;
  }
  .btn-fb{
      color: #fff;
      background-color:#3b5998;
  }
  .btn-fb:hover{
      color: #fff;
      background-color:#496ebc 
  }
  .btn-tw{
      color: #fff;
      background-color:#55acee;
  }
  .btn-tw:hover{
      color: #fff;
      background-color:#59b5fa;
  }
   .row>ul {
    list-style-type:none;
    list-style-position:none;
    list-style-image:none;
  }
  .row1>ul {
    list-style-type:none;
    list-style-position:none;
    list-style-image:none;
  }

  @media(max-width:768px){
      #login-dp{
          background-color: inherit;
          color: #fff;
      }
      #login-dp .bottom{
          background-color: inherit;
          border-top:0 none;
      }
  }
  .navbar-login
  {
      width: 305px;
      padding: 10px;
      padding-bottom: 0px;
  }

  .navbar-login-session
  {
      padding: 10px;
      padding-bottom: 0px;
      padding-top: 0px;
  }

  .icon-size
  {
      font-size: 87px;
  }
  .navbar-brand {
      width: 70px;
      height: 50px;
      background: url('http://www.sneaker-
mission.com/uploads/3/1/2/7/31279819/5617441.png') no-repeat center center;
      background-size: 50px;
      padding-top: 7px;
  }
  .navbar-nav {
      padding-left: 15px;
  }
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
      border-color: #00486c;
  }
  .container-fluid {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
      background-color: rgb(51,79,111);
      position: relative;
      right: 0.5vw;
      width: 100vw;

  }
 .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
      color: white;
      background-color: #428bca;

  }
  .navbar-default .navbar-nav>li>a {
      color: white;
  }
  .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0px;
      z-index: 1000;
      display: none;
      float: left;
      min-width: 160px;
      padding: 5px 0px;
      margin: 2px 0px 0px;
      font-size: 14px;
      list-style: none;
      background-color: white;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      border: 1px solid rgba(0, 0, 0, 0.14902);
      border-image-source: initial;
      border-image-slice: initial;
      border-image-width: initial;
      border-image-outset: initial;
      border-image-repeat: initial;
      border-radius: 4px;
      box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px;
      left:15vw;
      width:70vw;
  }
  .nav-list > li {
      padding: 20px 15px 15px;
      border-left:0px;
  }
  .nav-list {
      border-bottom: 0px;
  }
  .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
      color: white;
      cursor: default;
      background-color: #428bca;
  }
  .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
      color: black;
      cursor: default;
      background-color: rgb(255, 255, 255);
      border: solid black 1px;
  }
  body
  {
      padding-top: 20px;
  }

Javascript

$(document).ready(function(){
$(".dropdown").hover(            
    function() {
        $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
        $(this).toggleClass('open');        
    },
    function() {
        $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
        $(this).toggleClass('open');       
    }
);
});
$('.change>a').hover(function() { 
    $(this)[0].click();
}, 
    function() {
    /* code for mouseout */
    });

Answer 1

对于 wordpress，jQuery $ 别名默认情况下不起作用。请改用jQuery。或者像这样通过.ready 传递$：

jQuery(document).ready(function($){
  // can use $ here
});

还将您的.hover 代码放入.ready。

注意：看到 wordpress 和 $ ...我没有检查您的代码..