1

我正在尝试完成此模板中的用户菜单的功能，但似乎无法使其正常工作。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>
4

1 回答 1

4

尝试类似：

$('.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 之后添加或在文档准备好时添加

更新

我对这个解决方案的担忧是，如果你愿意，它似乎动画缓慢或滞后。(@michael-stramel)

切换由折叠插件处理的导航栏。这个插件在崩溃时执行耗时的 css3 转换。有关更多信息，请参阅：关闭 Twitter Bootstrap 导航栏过渡动画

在这种情况下尝试：

.profile-collapse.collapsing {
  -webkit-transition: height 0.0001s ease;
          transition: height 0.0001s ease;
}
于 2013-10-03T21:07:33.670 回答