Javascript 顶杆不膨胀

我有以下HTML代码：

<div class="nine columns">
        <nav class="top-bar">
          <ul>
            <li class="name"><h1><a href="#"> Please select your page</a></h1></li>
            <li class="toggle-topbar"><a href="#"></a></li>
          </ul>
          <nav>
            <ul class="right">
            @if (User.IsInRole("MetaAdmin"))
            { 
              @Html.MenuItem("Admin", "Index", "Admin", "icon-lock")
              @Html.MenuItem("Home", "Index", "Home", "icon-home")
                if (System.Configuration.ConfigurationManager.AppSettings["companyName"].ToString() != "bobsbusiness")
                {
                @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop")
                }
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
              @Html.MenuItem("Profile", "Index", "Profile", "icon-user")  
              @Html.MenuItem("Email", "Index", "Email", "icon-envelope")                                                                                      
              @Html.MenuItem("Contact", "Index", "Contact", "icon-comments")
            }
            else if (User.IsInRole("Admin"))
            {
              @Html.MenuItem("Admin", "Index", "Admin", "icon-lock")
              @Html.MenuItem("Home", "Index", "Home", "icon-home")
              @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop")
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
              @Html.MenuItem("Profile", "Index", "Profile", "icon-user")
              @Html.MenuItem("Email", "Index", "Email", "icon-envelope")  
              @Html.MenuItem("Contact", "Index", "Contact", "icon-comments")
            }
            else if (User.IsInRole("CompanyManager"))
            {
              @Html.MenuItem("Admin", "Index", "Admin", "icon-lock")
              @Html.MenuItem("Home", "Index", "Home", "icon-home")
              @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop")
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
              @Html.MenuItem("Profile", "Index", "Profile", "icon-user")
              @Html.MenuItem("Contact", "Index", "Contact", "icon-comments")
            }
            else if (User.IsInRole("StandardUser"))
            {
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
            }
            else
            {          
              @Html.MenuItem("Home", "Index", "Home", "icon-home")
                if (System.Configuration.ConfigurationManager.AppSettings["companyName"].ToString() != "bobsbusiness")
                {
                @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop")
                }
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
              @Html.MenuItem("Profile", "Index", "Profile", "icon-user")
              @Html.MenuItem("Contact", "Index", "Contact", "icon-comments")
            }
            </ul>
          </nav>
        </nav>
      </div>

我正在使用Media query将顶部的菜单项更改为特定宽度的下拉菜单，但单击下拉菜单时，它无法展开。我已经包括了必要的css文件。有没有人经历过类似的问题

---

JSFIDDLE这里

我与javascript文件有一些冲突，我无法确定其根本原因。将扩展类添加到nav topbar解决了我的问题，因此我编写了以下javascript代码：

$(document).ready(function () {
      $('#toggleit').click(function () {
          if ($('#TopNavigation').hasClass('expanded')) {
              document.getElementById('TopNavigation').classList.remove('expanded');
          }
          else if (!$('#TopNavigation').hasClass('expanded')) {
              document.getElementById('TopNavigation').classList.add('expanded');
          }
      });
  });;

然后，我更改了我的topheader，如下所示：

 <div class="nine columns">
        <nav id="TopNavigation" class="top-bar">
            <ul id="toggle-topbar">
                <li class="name"><h1><a href="#"> Please select your page</a></h1></li>
                <li class="toggle-topbar"><a id="toggleit" href="#"></a></li>
            </ul>
          <section>
            <ul class="right">
            @if (User.IsInRole("MetaAdmin"))
            { 
              @Html.MenuItem("Admin", "Index", "Admin", "icon-lock")
              @Html.MenuItem("Home", "Index", "Home", "icon-home")
                if (System.Configuration.ConfigurationManager.AppSettings["companyName"].ToString() != "bobsbusiness")
                {
                @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop")
                }
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
              @Html.MenuItem("Profile", "Index", "Profile", "icon-user")  
              @Html.MenuItem("Email", "Index", "Email", "icon-envelope")                                                                                      
              @Html.MenuItem("Contact", "Index", "Contact", "icon-comments")
            }
            ................................

---

我已经添加了jsfiddle，通常您需要一些附带的JS来激活CSS的菜单hide/show。我不确定是否有一个段落中的下拉是一个很好的场景。我实际上是在一个NavaTAG标签中恢复到静态HTML版本设计器已经创建的，我也调用Buffix.M.js，但是这不能显示/隐藏菜单项。