Question

我正在尝试完成此模板中的用户菜单所做的但似乎无法使其工作。 http://beer2code.com/themes/core-admin/pages/dashboard/dashboard.html（我已经购买了代码，但我只想让用户菜单功能正常工作。）在移动设备中，您点击按钮，它会显示下拉菜单，但不显示原始下拉列表。我已经坚持了一段时间并接受任何建议。（如果你愿意的话，甚至建议如何更好地编写代码的其他部分）

这是我的标记，假设Bootstrap 3标准为less / css：

<header class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle pull-left" data-toggle="offcanvas" data-target=".sidemenu-offcanvas" id="nav-toggle">
            <span class="sr-only">Toggle navigation</span>
            <i class="icon-reorder" style="color: white;"></i>
        </button>

        <a class="navbar-brand" href="#">
            <img src="assets/images/logos/logo.png" alt="GEC Logo">
        </a>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".profile-collapse">
            <span class="sr-only">Toggle user menu</span>
            <i class="icon-user" style="color: white;"></i>
        </button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".search-collapse">
            <span class="sr-only">Toggle search</span>
            <i class="icon-search" style="color: white;"></i>
        </button>
    </div>

    <div class="collapse navbar-collapse profile-collapse navbar-right">
        <ul class="nav navbar-nav">
            <li class="dropdown ">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <img src="#" alt="John Smith">
                    John Smith <i class="caret"></i>
                    <span class="badge badge-red">5</span>
                </a>
                <ul class="dropdown-menu">
                    <li class="with-image">
                        <div class="avatar">
                            <img src="assets/images/avatar.png" />
                        </div>
                        <span>John Smith</span>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#/">
                            <i class="icon-user"></i>
                            <span>Profile</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/">
                            <i class="icon-envelope"></i>
                            <span>Messages</span>
                            <span class="label label-red pull-right">5</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/">
                            <i class="icon-cog"></i>
                            <span>Settings</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/">
                            <i class="icon-off"></i>
                            <span>Logout</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="collapse navbar-collapse search-collapse navbar-right">
        <form class="navbar-form" action="" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
        </form>
    </div>
</header>

Answer 1

尝试类似：

$('.profile-collapse').on('show.bs.collapse',function()
{   
$('.profile-collapse .dropdown > a').hide();
});
$('.profile-collapse').on('shown.bs.collapse',function()
{
    $('.profile-collapse .dropdown').addClass('open');

});
$('.profile-collapse').on('hide.bs.collapse',function()
{
    $('.profile-collapse .dropdown').removeClass('open');
    $('.profile-collapse .dropdown > a').show();
});

在boostrap JS或文档就绪后添加

<强>更新

我对这个解决方案的关注是它似乎慢慢地生成动画如果你愿意，就会落后（@迈克尔stramel）

切换导航栏由崩溃插件处理。此插件在崩溃时预先形成耗时的css3过渡。有关更多信息，请参阅：Turning off Twitter Bootstrap Navbar Transition animation

在这种情况下，请尝试：

.profile-collapse.collapsing {
  -webkit-transition: height 0.0001s ease;
          transition: height 0.0001s ease;
}

Twitter Bootstrap 3 - 导航崩溃中的下拉菜单

1 个答案: