文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用带可折叠菜单的引导滚动间谍？

问如何使用带可折叠菜单的引导滚动间谍？
EN

Stack Overflow用户

提问于 2015-02-03 16:26:42

回答 2查看 1.3K关注 0票数 5

我有一个MCQ问题网站。在一次考试中，可能有来自不同学科的100到200道题。所以我想让导航更容易。由于导航相当大，所以我想在开放主题下打开问题，即:当subject 1活动时，只有Subject 1下的问题链接是可见的，就像Bootstrap网站的正确导航一样。下面是我的工作样本。

根据他们的网站指示，我使用了Bootstrap滚动间谍，它工作得很好。但当我试图使它可折叠(就像Bootstrap网站的正确导航)，它是行不通的。

我用的是靴带- 3.3.2

<body data-spy="scroll" data-target="#subjectNavbar" data-offset="0">
    <header id="header" class="container-fluid navbar-fixed-top">
        ...
    </header>
    <div class="container">
        <div class="row">
            <aside id="left-column" class="col-sm-3">
                <nav id="subjectNavbar" class="sub-nav">
                    <ul class="nav subject-ul">
                        <li>
                            <a href="#subject-1">Subject 1</a>
                            <ul class="list-inline question-ul">
                                <li id="question-no-1"><a href="#question-1">1</a></li> 
                                <li id="question-no-2"><a href="#question-2">2</a></li> 
                                <li id="question-no-3"><a href="#question-3">3</a></li> 
                                ...
                                <li id="question-no-20"><a href="#question-20">20</a></li> 
                            </ul>
                        </li>
                        <li>
                            <a href="#subject-2">Subject 2</a>
                            <ul class="list-inline question-ul">
                                <li id="question-no-21"><a href="#question-21">21</a></li> 
                                <li id="question-no-22"><a href="#question-22">22</a></li> 
                                <li id="question-no-23"><a href="#question-23">23</a></li> 
                                ...
                                <li id="question-no-40"><a href="#question-40">40</a></li> 
                            </ul>
                        </li>
                        ...
                        <li>
                            <a href="#subject-5">Subject 5</a>
                            <ul class="list-inline question-ul">
                                <li id="question-no-81"><a href="#question-81">81</a></li> 
                                <li id="question-no-82"><a href="#question-82">82</a></li> 
                                <li id="question-no-83"><a href="#question-83">83</a></li> 
                                ... 
                                <li id="question-no-100"><a href="#question-100">100</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>                
            </aside>
            <section class="col-sm-6">
                <div class="question-paper">
                    <div class="subject-group" id="subject-1">
                        <h2>Subject 1</h2>
                        <article id="question-1">
                            <header><em>1.</em> Question 1</header>
                            <ol>
                                <li>Option A</li>
                                <li>Option B</li>
                                <li>Option C</li>
                                <li>Option D</li>
                            </ol>
                        </article>
                        ...
                        <article id="question-20">
                            <header><em>20.</em> Question 20</header>
                            <ol>
                                <li>Option A</li>
                                <li>Option B</li>
                                <li>Option C</li>
                                <li>Option D</li>
                            </ol>
                        </article>
                    </div> 
                    ...
                    <div class="subject-group" id="subject-5">
                        <h2>Subject 5</h2>
                        <article id="question-81">
                            <header><em>81.</em> Question 81</header>
                            <ol>
                                <li>Option A</li>
                                <li>Option B</li>
                                <li>Option C</li>
                                <li>Option D</li>
                            </ol>
                        </article>
                        ...
                        <article id="question-100">
                            <header><em>100.</em> Question 100</header>
                            <ol>
                                <li>Option A</li>
                                <li>Option B</li>
                                <li>Option C</li>
                                <li>Option D</li>
                            </ol>
                        </article>
                    </div> 
                </div>
            </section>
            <aside id="right-column" class="col-sm-3">
                ...
            </aside>
        </div><!--/row-->
    </div><!--/.container-->
    <footer class="container">
        ...
    </footer>
</body>

twitter-bootstrap-3

scrollspy

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-02-08 07:07:11

在深入研究了引导网站、本地css和javascript文件之后，我发现它们使用css使导航变得可折叠。它们使ul在活动可见下显示，其他子ul则不显示任何。

.subject-ul .question-ul{
    display:none;
}

.subject-ul li.active>.question-ul{
    display:visible;
}

票数 4

Stack Overflow用户

发布于 2016-07-21 07:28:46

Chayan's answer的位置非常好。除了显示:visible对我不起作用，所以我使用了display:block，它做到了这一点。

.subject-ul .question-ul{
     display:none;
}

.subject-ul li.active>.question-ul{
     display:block;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28303865

复制

相似问题

问如何使用带可折叠菜单的引导滚动间谍？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用带可折叠菜单的引导滚动间谍？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用带可折叠菜单的引导滚动间谍？
EN