【发布时间】：2015-09-15 13:48:22
【问题描述】：
一个多星期以来，我一直在努力解决这个问题，我认为我的主要问题是我不知道应该去哪里找。
基本上我想要创建的是页面左侧的导航区域。我为其构建网站的人给了我大量他们想要的导航元素（真的有大约 25-30 个）。
我已经设法将它们分类为适当的标题和子标题，但现在我面临的问题是我不知道如何构建下拉功能。
我是网络开发的新手，这是一个很大的挑战，但我不知道从哪里开始。
我已经观看了数小时的教程视频，讨论如何构建顶部对齐的导航栏，在内容顶部弹出等等，但没有一个“幻灯片”打开（如果有意义的话），所以当你点击一个元素，它下面的其他链接向下滑动，为子标题腾出空间。
这是我到目前为止所拥有的（我知道这有点乱）请怜悯！
这只是为了向您展示我所说的导航区域样式的含义。
我发现自己在这个特殊问题上陷入了一个巨大的困境，即使这只是朝着正确方向的一点，我也确实需要一些帮助。
我已尝试搜索存在此特殊问题的线程，但没有任何东西真正击中头部，如果我遗漏了什么，我深表歉意。
非常感谢
这是包含导航栏的 HTML
<!-- Sidebar -->
<nav id="sidebar-wrapper">
<a href="index"><img src="img/logo.png" alt="People's Centre for Change"></a>
<ul class="sidebar-nav">
<li><a href="#" id="dropdown-toggle">About Us</a>
<ul class="dropdown-wrapper">
<li><a href="about-us">About Us</a></li>
<li><a href="our-journey">Our Journey</a></li>
<li><a href="where-we-are-going">Where We Are Going</a></li>
</ul>
</li>
<li><a href="what-we-do">What We Do</a></li>
<li><a href="the-building">The Building</a></li>
<li><a href="volunteer">Volunteer With Us</a></li>
<li><a href="get-involved">Get Involved</a></li>
<li><a href="products">Unique Products</a></li>
<li><a href="donate">Donate</a></li>
<li><a href="contact">Contact Us</a></li>
<li><a href="calendar">Calendar</a></li>
</ul>
</nav>这里是 Javascript
//handle menu clicks and animate loading in of new content
$('ul.sidebar-nav li a').click(function () {
var toLoad = $(this).attr('href');
$('#ajax-content-wrapper').load('html/' + toLoad + '.php', function(){
$('#ajax-content-wrapper').hide('slow',loadContent);
function loadContent() {
$('#ajax-content-wrapper').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#ajax-content-wrapper').show('slow');
}
$('.bxslider').bxSlider();
});
return false;
});
//hide/display sidebar nav
$("#menu-toggle").click(function (e){
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
//hide/display dropdown nav
$("#dropdown-toggle").click(function (e){
e.preventDefault();
e.stopPropagation();
$(".dropdown-wrapper").toggleClass("dropdownDisplayed");
});
});坦率地说，我还没有接触到 CSS，因为我遇到了这个问题，我的大脑有点短路了。我现在处于对这一切感到困惑的阶段，我什至无法解释我的工作。
【问题讨论】：
-
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含重现它所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
-
请添加您尝试/使用过的代码。
-
添加了代码 sn-ps，抱歉。
-
我注意到您使用引导程序。也许你尝试手风琴最简单的方法？ getbootstrap.com/javascript/#collapse
标签： javascript jquery html css twitter-bootstrap