Question

我有一个我想解决的问题。我为电子商务网站创建了一个菜单。菜单工作正常。不幸的是我无法在这里复制整个代码因为它太多但是我做了一个简短的版本和一张图片来呈现菜单的结构。主要概念是在主导航栏上单击按钮时，将打开一个包含2列的下拉菜单。左侧站点有更多按钮，右侧是div容器的显示位置，具体取决于左侧的活动列表项。这就是问题出现的地方。因为容器通过将鼠标悬停在列表项上而不是通过单击它来打开。当鼠标悬停在li上时，它会突出显示，但当鼠标移出时，突出显示的颜色会消失。我想保持活动的li项目突出显示，直到鼠标悬停在另一个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

我可以理解你的问题。我试过这个插件。它可以满足您的需求。 Bootstrap Submenu

Answer 2

使用jQuery将active类添加到悬停项目 -

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

仅当悬停在同一父项的项目上时才会添加active类，即相同的子菜单

Answer 3

所有回复的Thanx。在Rohit的帮助下，我做了一些工作。

但是我不得不换一条线。

$(this).parent().find('.submenu-list-item.active').removeClass('active');

这条线不幸地不适合我。一旦另一个被徘徊，它就不会删除突出显示的项目。而不是这个，我从ul。

中的所有项目（a）中删除了该类

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

无论如何，谢谢你的引导回答。我将从那里学到一些新东西。

Html列表项在悬停

3 个答案: