Question

我正在使用Bootstrap Dropdown。

当我点击主菜单“有子菜单”列表项时，此列表的子项必须是Toggle。直到这里工作正常......

但是我该怎么做：如果我点击有子菜单 <li>我必须看到所有子菜单项目没有scorll向下...这意味着，我的scorll应该去最后一个子菜单项的结尾...

FIDDLE

的jQuery

$('ul.dropdown-menu').on('click', function(event){
    event.stopPropagation();
});

$('ul.dropdown-menu').on('click', function(){
    $('.submenu').toggle();
});

HTML

<div class="btn-group" role="group" aria-label="...">
    <div class="btn-group open" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li class="pd-dropdown">

                <a href="#" class="test">Has Sub Menu
                    <ul class="submenu">
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                    </ul>
                </a>
            </li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>

Answer 1

添加此jquery

$('.test').on('click',function(){
console.log("gdfg");
    $('ul.dropdown-menu').scrollTop(500);
});

这是 DEMO Link

Answer 2

在你的CSS中，这就是阻止他们全部显示的内容

.dropdown-menu{ max-height:250px; overflow:auto; }

如果您想要全部查看，请将其更改为：

.dropdown-menu{ overflow:auto; }

Bootstrap Dropdown - Onclick菜单项，scorll to last子菜单项

FIDDLE

2 个答案: