使用子菜单上的滚动条时无法显示子菜单

Question

我正在为我的多下拉菜单使用引导程序。但它有一个问题，我想在子菜单上滚动条时显示子菜单，但它对我不起作用，任何人都可以帮助我吗？请检查我的截图和我的代码，非常感谢。

截图： https://photos.google.com/share/AF1QipN1gUlcuB3zpUZ-scjmd6vhZyDFM8S-GsUUKH-SjGbTbI7kuz1Z-1JTfViNwt2B7w?key=QkVhOThzMXFzVFJrbGctRGFEQUpYRVhDa1Z0cTBR 演示：

$(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();
            });
        });

.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;
        }

  .sub-menu {
      height: 200px;
      overflow-y: scroll;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.2.js'></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
  
  
  <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>
    </div>

Answer 1

我认为你需要这个。我希望这会对你有所帮助。

 $(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();
            });
        });

 .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;
        }


  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.2.js'></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
  
  
  <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>
    </div>