Question

我有以下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>

我正在使用媒体查询将顶部的菜单项更改为一定宽度的下拉菜单，但点击下拉列表后无法展开。我已经包含了必要的css文件。有没有人经历过类似的问题？

JSFIDDLE http://jsfiddle.net/P8XfY/

Answer 1

我与javascript文件存在一些冲突，我无法确定其根本原因。将扩展类添加到导航顶部栏解决了我的问题所以我编写了以下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")
            }
            ................................

响应性的顶栏不扩展

1 个答案: