我正在尝试在SharePoint 2013网站中使用引导程序导航。导航需要交错的无序列表/列表项。我在布局上有一个良好的开端，但是javascript让我感到烦恼......每当我点击其中一个链接时，每次都会关闭导航框并重置。这就是我到目前为止所使用的。我正在使用bootstrap 3.3.6。我不是最好的JS，但慢慢学习。任何帮助都会非常感激，因为我花了大约20个小时才完成这件事。
<div id="menubar" class="menubar-inverse animate">
<div class="menubar-fixed-panel">
<div class="expanded">
<a href="/">
<span class="text-lg text-bold "></span>
</a>
</div>
</div>
<div class="menubar-scroll-panel">
<div style="display:block;">
<a class="btn btn-icon-toggle menubar-toggle right-toggle" data-toggle="menubar" href="javascript:void(0);">
<i class="fa fa-bars" style="color:white" title="this icon expands and collapses left navigation"></i>
</a>
</div>
<ul id="main-menu" class="list gui-controls">
<li id="svc_menuitem" role="menuitem">
<a href="/sites/1VERC/PM-Guidebook/" title="Welcome">
<div class="gui-icon">
<!--<i class="fa fa-bookmark" style="color:white; margin-left:5px;" title="Welcome"></i>-->
</div>
<span class="title" title="Welcome">
Welcome</span>
</a>
<ul id="main-menu" class="list gui-controls">
<li id="other_menu" role="menuitem">
<a href="" title="PM Guidebook: Welcome & Overview">
<div class="gui-icon">
<!--<i class="fa fa-file" style="color:white; margin-left:5px;" title="PM Guidebook: Welcome & Overview"></i>-->
</div>
<span class="title" title="PM Guidebook: Welcome & Overview">
PM Guidebook: Welcome & Overview</span>
</a>
<ul id="main-menu" class="list gui-controls">
<li id="other_menu1" role="menuitem">
<a href="" title="What is a Project?">
<div class="gui-icon">
<!--<i class="fa fa-book" style="color:white; margin-left:5px;" title="What is a Project?"></i>-->
</div>
<span class="title" title="What is a Project?">
What is a Project?</span>
</a>
<li id="other_menu2" role="menuitem">
<a href="" title="Project Management">
<div class="gui-icon">
<!--<i class="fa fa-book" style="color:white; margin-left:5px;" title="Project Management"></i>-->
</div>
<span class="title" title="Project Management">
Project Management</span>
</a>
<li id="other_menu2" role="menuitem">
<a href="" title="Project Management">
<div class="gui-icon">
<!--<i class="fa fa-book" style="color:white; margin-left:5px;" title="Starting a Project within OSI|VERC"></i>-->
</div>
<span class="title" title="Starting a Project within OSI|VERC">
Starting a Project within OSI|VERC</span>
</a>
</ul>
</li>
</ul>
<ul id="main-menu" class="list gui-controls">
<li id="other_menu3" role="menuitem">
<a href="" title="PM Guidebook: Charter">
<div class="gui-icon">
<!--<i class="fa fa-file" style="color:white; margin-left:5px;" title="PM Guidebook: Welcome & Overview"></i>-->
</div>
<span class="title" title="PM Guidebook: Charter">
PM Guidebook: Charter</span>
</a>
<ul id="main-menu" class="list gui-controls">
<li id="other_menu4" role="menuitem">
<a href="" title="What is a Project?">
<div class="gui-icon">
<!--<i class="fa fa-book" style="color:white; margin-left:5px;" title="What is a Project?"></i>-->
</div>
<span class="title" title="What is a Project?">
Project Purpose</span>
</a>
</li>
<li id="other_menu5" role="menuitem">
<a href="" title="Project Management">
<div class="gui-icon">
<!--<i class="fa fa-book" style="color:white; margin-left:5px;" title="Project Management"></i>-->
</div>
<span class="title" title="Project Management">
Project Team</span>
</a>
</li>
<li id="other_menu6" role="menuitem">
<a href="" title="Project Management">
<div class="gui-icon">
<!--<i class="fa fa-book" style="color:white; margin-left:5px;" title="Starting a Project within OSI|VERC"></i>-->
</div>
<span class="title" title="Starting a Project within OSI|VERC">
Charter Expiration & Approval</span>
</a>
</li>
</ul>
</li>
</ul>
<ul id="main-menu" class="list gui-controls">
<li id="other_menu3" role="menuitem">
<a href="" title="PM Guidebook: Charter">
<div class="gui-icon">
<!--<i class="fa fa-file" style="color:white; margin-left:5px;" title="PM Guidebook: Welcome & Overview"></i>-->
</div>
<span class="title" title="PM Guidebook: Charter">
PM Guidebook: Charter</span>
</a>
<ul id="main-menu" class="list gui-controls">
<li id="other_menu4" role="menuitem">
<a href="" title="What is a Project?">
<div class="gui-icon">
<!--<i class="fa fa-book" style="color:white; margin-left:5px;" title="What is a Project?"></i>-->
</div>
<span class="title" title="What is a Project?">
Project Purpose</span>
</a>
</li>
<li id="other_menu5" role="menuitem">
<a href="" title="Project Management">
<div class="gui-icon">
<!--<i class="fa fa-book" style="color:white; margin-left:5px;" title="Project Management"></i>-->
</div>
<span class="title" title="Project Management">
Project Team</span>
</a>
</li>
<li id="other_menu6" role="menuitem">
<a href="" title="Project Management">
<div class="gui-icon">
<!--<i class="fa fa-book" style="color:white; margin-left:5px;" title="Starting a Project within OSI|VERC"></i>-->
</div>
<span class="title" title="Starting a Project within OSI|VERC">
Charter Expiration & Approval</span>
</a>
</li>
</ul>
</li>
</ul>