Htmlのリストアイテムはホバーでアクティブに保たれます

Question

私は解決したい問題があります。私はeコマースサイトのメニューを作成しました。メニューは正常に動作します。残念ながら、あまりにも多くのコードをコピーすることはできませんが、私はショートバージョンとメニューの構造を示す画像を作っています。 主なコンセプトは、メインナビゲーションでボタンをクリックしたときに、2列のドロップダウンメニューが開きます。左側のサイトにはさらにボタンがあり、右側には左側のアクティブなリスト項目に応じてdivコンテナが表示されます。それが問題の発生場所です。 リスト項目をクリックしないでホバーすると、コンテナが開きます。マウスがli上にあるときは強調表示されますが、マウスが外に出ると強調表示色が消えます。 私は、アクティブなアイテムを他のアイテムに移動するまで、アクティブなアイテムを強調表示し続けたいと思います。 どういうわけか、私はホバリングされている行（アイテム）を取得し、ハイライトされたCSSクラスを変更し、別の行がホバリングされるまで保つ必要があります。次に、cssクラスを削除し、新しいアクティブなリストで同じことを行います。 私はそれがはっきりと怒っていることを願っています。 :-) ここにhtmlコードとその構造があります。

<nav class="navbar navbar-default" role="navigation"> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a> 
     <div class="dropdown-menu">     

      <div class="col-sm-3"> 
      <ul class="submenu-list"> 
       <li><a href="#" class="submenu-list-item" id="item1"> </a></li> 
       <li><a href="#" class="submenu-list-item " id="item2"> </a></li> 
       <li><a href="#" class="submenu-list-item " id="item3"> </a></li> 
      </ul> 
      </div> 

      <div class="col-sm-9" id="submenubox1"> 
       <h3>Subbox Title</h3> 
       <div>Content</div> 
      </div> 

      <div class="col-sm-9" id="submenubox2"> 
       <h3>Subbox Title</h3> 
       <div>Content</div> 
      </div> 

     </div> 
     </li> 
    </ul> 
    </div> 
</nav>  

しようとしたコードイムはmenu.aim javascriptを使用して以下の通りである。しかし、このコードが動作していない

<script src="jquery.menu-aim.js" type="text/javascript"></script> 
<script> 

     var $menu = $(".dropdown-menu"); 
     $menu.menuAim({ 
      activate: activateSubmenu, 
      deactivate: deactivateSubmenu 
     }); 

     function activateSubmenu(row) { 
      var $row = $(row); 
      // Keep the currently activated row's highlighted look 
      $row.find("a").addClass("maintainHover"); 
     } 

     function deactivateSubmenu(row) { 
      //remove the row's highlighted look 
      $row.find("a").removeClass("maintainHover"); 
     } 
</script> 

を。これがこの考えを解決する正しい方法であるかどうかはわかりません。 はまた、私はCSSコードを使用しようとしました：

ul.class li:hover{ 
background-color: red !important; 
} 

しかし、これはどちらか動作していません。

これは私が達成しようとしている同様の例です。 https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html

任意のヘルプは充当されます。 ありがとうございました！

Answer 1

使用jQueryのはホバー項目にactiveクラスを追加します。 私はそれをうまくいってくれました。

しかし、私は行を変更する必要がありました。

この行は不幸にも機能しませんでした。 ハイライト表示されたアイテムは、もう一度表示されても削除されませんでした。この代わりに、ulのすべてのアイテム（a）からクラスを削除しました。

$('.submenu-list-item:not(.active)').on('mouseover', function() { 
$(".submenu-list a").removeClass(); 
$(this).addClass('active'); 
}); 

とにかくブートストラップの回答もありがとうございます。そこから新しいものを学びます。

Answer 2

ご迷惑をおかけして申し訳ございません。私はこのプラグインを試しました。あなたの必要性を満たすかもしれません。すべての返信のために同じ親すなわち、同じサブメニューの項目

Answer 3

ありがとうの上に推移した場合にのみこれはactiveクラスを追加します

$('.submenu-list-item:not(.active)').on('mouseover', function() { 
    $(this).parent().find('.submenu-list-item.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

- Bootstrap Submenu