【问题标题】:collapse menu nav stay open when clicked on bootstrap 3单击引导程序 3 时,折叠菜单导航保持打开状态
【发布时间】:2013-12-28 10:27:39
【问题描述】:

我有这个工作:http://jsfiddle.net/JpJqD/2/

但是想这样做:

例如:如果单击“创建用户”链接之一并且它到达我网站中的一个页面,则菜单或导航会自动折叠。你如何设置它让主标题“用户”保持打开状态,而不是折叠?请帮忙。谢谢

<div class="panel panel-default">
    <div class="panel-heading">
        <h3>Navigation</h3>
    </div>

    <div id="sidebar" class="list-group"> 

        <a href="#" class="list-group-item active">
            <i class="icon-dashboard"></i> Dashboard
        </a>

        <a href="#users" class="list-group-item"  data-parent="#sidebar">
            <i class="icon-group"></i> Users
            <span class="badge bg_danger">0</span>
        </a>

        <div id="users" class="list-group subitem collapse">    

            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Users
                <span class="badge bg_danger">0</span>
            </a>

            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Create User
            </a>

            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Create Group
            </a>

        </div>  

        <a href="#articles" class="list-group-item"  data-parent="#sidebar">
            <i class="icon-file-text"></i> Articles
            <span class="badge bg_danger">0</span>
        </a>

        <div id="articles" class="list-group subitem collapse"> 

            <a href="#" class="list-group-item bg_warning">
                <i class="icon-caret-right"></i> Articles
                <span class="badge bg_danger">0</span>
            </a>

            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Create Article
            </a>

        </div>

    </div>
</div>

$('#sidebar > a').on('click', function (e) {
    e.preventDefault();

    if(!$(this).hasClass("active")){
        var lastActive = $(this).closest("#sidebar").children(".active");
        lastActive.removeClass("active");
        lastActive.next('div').collapse('hide');
        $(this).addClass("active");
        $(this).next('div').collapse('show');
    }
});

【问题讨论】:

    标签: twitter-bootstrap menu collapse nav


    【解决方案1】:

    我认为您需要做的是将父 div 的 ID 添加到链接的末尾。 例如url?link='users'

    然后您可以从 url 中获取链接值。以下链接演示了如何完成此操作 How can I get query string values in JavaScript?

    然后,一旦您从 url 中获取值,您就可以在页面加载时触发点击。

    var link = 'users'; // or the value grabbed from the url
    $('a[href="#'+link+'"').trigger('click');
    

    例子

    http://jsfiddle.net/trevordowdle/JpJqD/76/

    【讨论】:

    • @user2343800 我可以就我的回答获得一些反馈吗?这对您有帮助吗,还是您在使其正常工作时仍然遇到问题?
    猜你喜欢
    • 2015-11-05
    • 2019-11-13
    • 1970-01-01
    • 2017-07-23
    • 1970-01-01
    • 2017-05-24
    • 1970-01-01
    • 2015-10-06
    • 1970-01-01
    相关资源
    最近更新 更多