bootstrap 多级导航 PC 手机解决方案

bootstrap 多级导航 PC 手机解决方案

多于两层的导航比较少,这里业务需要 bootstrap 的多级导航。在 PC 上悬停时出现子菜单(默认是 click 的方式),在手机上依然是 click 出现子菜单,不能是悬停。PC 上下拉选项可以点击进入链接,手机点击显示或隐藏子菜单。

以下是 demo
在线 demo

<html>

<head>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<style>
@media (min-width: 767px) {
    .navbar-nav .dropdown-menu .caret {
        transform: rotate(-90deg);
    }
}
</style>
</head>

<body>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <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="#">NavBar</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="https://github.com/fontenele/bootstrap-navbar-dropdowns" target="_blank">GitHub</a></li>
                    <li>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action [Menu 1.1]</a></li>
                            <li><a href="#">Another action [Menu 1.1]</a></li>
                            <li><a href="#">Something else here [Menu 1.1]</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link [Menu 1.1]</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link [Menu 1.1]</a></li>
                            <li>
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.1] <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action [Menu 1.2]</a></li>
                                    <li>
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.2] <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.3] <b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Action [Menu 1.4]</a></li>
                                                    <li><a href="#">Another action [Menu 1.4]</a></li>
                                                    <li><a href="#">Something else here [Menu 1.4]</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link [Menu 1.4]</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">One more separated link [Menu 1.4]</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action [Menu 2.1]</a></li>
                            <li><a href="#">Another action [Menu 2.1]</a></li>
                            <li><a href="#">Something else here [Menu 2.1]</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link [Menu 2.1]</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link [Menu 2.1]</a></li>
                            <li>
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.1] <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action [Menu 2.2]</a></li>
                                    <li><a href="#">Another action [Menu 2.2]</a></li>
                                    <li><a href="#">Something else here [Menu 2.2]</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link [Menu 2.2]</a></li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.2] <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.3] <b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Action [Menu 2.4]</a></li>
                                                    <li><a href="#">Another action [Menu 2.4]</a></li>
                                                    <li><a href="#">Something else here [Menu 2.4]</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link [Menu 2.4]</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">One more separated link [Menu 2.4]</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        var $ = jQuery;

        function dropdownOpen() {
            // console.log('drop');
            var screenWidth = $(window).width();
            var isPhone = screenWidth < 768;
            if (!isPhone) {
                $('.navbar-nav a.dropdown-toggle').unbind('mouseover').on('mouseover', function() {
                    // console.log(this);
                    var $el = $(this);
                    var $parent = $(this).offsetParent(".dropdown-menu");

                    $(this).parent("li").addClass('open');

                    if (!$parent.parent().hasClass('nav')) {
                        $el.next().css({
                            "top": $el[0].offsetTop,
                            "left": $parent.outerWidth() - 4
                        });
                    }

                    $('.nav li.open').not($(this).parents("li")).removeClass("open");

                    return false;
                });
                $('.navbar-nav a.dropdown-toggle').addClass('disabled');
                $('.navbar-nav a.dropdown-toggle').unbind('click');
            } else {
                $('.navbar-nav a.dropdown-toggle').unbind('mouseover');
                $('.navbar-nav a.dropdown-toggle').removeClass('disabled');
                $('.navbar-nav a.dropdown-toggle').unbind('click').on('click', function() {

                    $(this).parent("li").toggleClass('open');

                    return false;
                });
            }
        }

        // resize 会执行两次
        $(window).on('resize', dropdownOpen).trigger('resize');
    });
    </script>
</body>

</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注