Question

我知道这个标题上有几个帖子。我想要的，在我现有的代码中实现相同的功能，并使用jQuery，因为我已经为它的样式目的添加了大量的CSS行。

我在Web应用程序中用于实现Multi下拉列表的代码片段。

HTML ：

<div class="dropdown" style="position:relative">
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
<ul class="dropdown-menu">
    <li>
        <a class="trigger right-caret">Level 1</a>
        <ul class="dropdown-menu sub-menu">
            <li><a href="#">Level 2</a></li>
            <li>
                <a class="trigger right-caret">Level 2</a>
                <ul class="dropdown-menu sub-menu">
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li>
                        <a class="trigger right-caret">Level 3</a>
                        <ul class="dropdown-menu sub-menu">
                            <li><a href="#">Level 4</a></li>
                            <li><a href="#">Level 4</a></li>
                            <li><a href="#">Level 4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Level 2</a></li>
        </ul>
    </li>
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 1</a></li>
</ul>

CSS

.dropdown-menu>li
{   position:relative;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:pointer;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;
}
.right-caret:after,.left-caret:after
 {  content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left:5px;
}
.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}

JS

$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
    var current=$(this).next();
    var grandparent=$(this).parent().parent();
    if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
        $(this).toggleClass('right-caret left-caret');
    grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
    grandparent.find(".sub-menu:visible").not(current).hide();
    current.toggle();
    e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
    var root=$(this).closest('.dropdown');
    root.find('.left-caret').toggleClass('right-caret left-caret');
    root.find('.sub-menu:visible').hide();
});
});

我只走了一段路。我可以在悬停时显示第一个下拉菜单。

JS

 $(".dropdown > a").hover(function(){
        $(this).parent().addClass('open');
    });

当我将悬停在第一级导航的任何“li”元素上时，如果存在任何第二级导航，则应显示它。

在悬停时显示Bootstrap多级下拉菜单

0 个答案: