Bootstrap 边栏扩展子类别

Question

使用 this as a my starting template. I am attempting to integrate the bootstrap way of having expanding subcategories as seen on the sidebar of the getting started page of getbootstrap.

但是，我在滚动页面时遇到问题，如果我到达类别或其子类别，它会在边栏中突出显示该类别的所有部分（而不仅仅是子类别）。

这是我的侧边栏的片段 HTML:

<div class="col-md-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
    <li class="active">
        <a>User Guide</a>
        <ul class="nav">
            <li>
                <a href="#intro">Introduction</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#search">Searching</a>
        <ul class="nav">
            <li>
                <a href="#searchresults">Search Results</a>
                <a href="#understandingsearch">Understanding Search Results</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#profile">User Profile</a>
        <ul class="nav">
            <li>
                <a href="#viewprofile">Viewing a Profile</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#eventgraph">Event Graph</a>
        <ul class="nav">
            <li>
                <a href="#graphdisplay">Graph Display</a>
                <a href="#graphinteraction">Graph Interaction</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#infopanel">Information Panel</a>
        <ul class="nav">
            <li>
                <a href="#paneldisplay">Panel Display</a>
            </li>
        </ul>
    </li>
</ul>
</div>

和 CSS:

body {
    padding-top:50px;
}

#masthead {
    min-height:250px;
}

#masthead h1 {
    font-size: 30px;
    line-height: 1;
    padding-top:20px;
}

#masthead .well {
    margin-top:8%;
}

@media screen and (min-width: 768px) {
    #masthead h1 {
        font-size: 50px;
    }
}

.navbar-bright {
    background-color:#111155;
    color:#fff;
}

.affix-top,.affix{
    position: static;
}

@media (min-width: 979px) {
    #sidebar.affix-top {
        position: static;
        margin-top:30px;
        width:228px;
    }

    #sidebar.affix {
        position: fixed;
        top:70px;
        width:228px;
    }
}

#sidebar li.active {
    font-weight: bold;
    border:0 #CC0000 solid;
    border-right-width:5px;
}

/* Nav: second level */
#sidebar .nav {
    display: none;
}

#sidebar > li.active .nav {
    display: block;
}

#sidebar .nav {
    margin-bottom: 8px;
}

#sidebar .nav > li > a {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 30px;
    font-size: 90%;
}

我还包含了 JSFiddle 来展示我所看到的：http://jsfiddle.net/HsZ9q/8/

请注意，在 JSFiddle 中，由于响应能力，您必须将 window 扩展到尽可能大，直到您看到侧边栏。

Answer 1

我认为您的 css 在 <li> 元素处于 :active 时向其添加边框，您应该对 <a> 元素添加边框。同样在子菜单上，每个元素都必须位于 <li>

希望对您有所帮助

http://jsfiddle.net/HsZ9q/12/

#sidebar li.active > a{
    font-weight: bold;
    border:0 #CC0000 solid;
    border-right-width:5px;
}

<!--left-->
<div class="col-md-3" id="leftCol">
    <ul class="nav nav-stacked" id="sidebar">
        <li class="active">
            <a>User Guide</a>
            <ul class="nav">
                <li>
                    <a href="#intro">Introduction</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#search">Searching</a>
            <ul class="nav">
                <li>
                    <a href="#searchresults">Search Results</a>
                </li>
                <li>
                    <a href="#understandingsearch">Understanding Search Results</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#profile">User Profile</a>
            <ul class="nav">
                <li>
                    <a href="#viewprofile">Viewing a Profile</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#eventgraph">Event Graph</a>
            <ul class="nav">
                <li>
                    <a href="#graphdisplay">Graph Display</a>
                </li>
                <li>
                    <a href="#graphinteraction">Graph Interaction</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#infopanel">Information Panel</a>
            <ul class="nav">
                <li>
                    <a href="#paneldisplay">Panel Display</a>
                </li>
            </ul>
        </li>
    </ul>
</div><!--/left-->

Bootstrap 边栏扩展子类别

Bootstrap Sidebar Expanding Subcategories

html

javascript

css

twitter-bootstrap

scrollspy