Question

使用MVC5，我动态设置样式以隐藏和显示_Layout导航栏中的菜单项。在URL帮助程序设置样式后检查html时，DOM元素正确更新，但浏览器不显示菜单项。我正在使用URL帮助扩展来设置我的样式属性（尝试设置类），如下所示：

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Schedule", "Index", "Schedule")</li>
                <li>@Html.ActionLink("Contact", "Index", "Contact", new { CompanyId = ViewBag.CompanyId }, htmlAttributes: new {  })</li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Tools</a>
                    <ul id="toolsMenu" class="dropdown-menu" role="menu">
                        @{ 
                            var menuItemStyle = Url.MenuItemStyle(User.Identity.GetUserName());
                        }
                        <li style=@menuItemStyle ><a href="#">Tool1</a></li>
                        <li style=@menuItemStyle ><a href="#">Tool2</a></li>
                        <li style=@menuItemStyle ><a href="#">Tool3</a></li>
                    </ul>
                </li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>

扩展方法如下所示：

public static class UrlExtensions
{
    public static string MenuItemStyle(this UrlHelper urlHelper, string username)
    {
        string result = "";

        int userType = GetUserType(username);

       if ( userType < 2)
        {
            result = "display:none";
        }

        return result;
    }
}

我也尝试使用局部视图来构建动态菜单项，再次构建正确的DOM元素，但在I.E中查看时也是如此。或Chrome，菜单下拉项目不显示。任何帮助将不胜感激。

以下是正确隐藏菜单项的DOM的截屏。

这是设置正确样式的后图片，但现在菜单项不起作用。

尝试更改扩展方法以仅在用户类型大于1时创建列表项。仍然存在相同的问题。每次都会正确生成DOM，但浏览器不会呈现DOM中的内容吗？

            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Tools</a>
                    <ul id="toolsMenu" class="dropdown-menu" role="menu">
                        @{ 
                            var menuItems = Url.GetMenuItems(User.Identity.GetUserName());
                        }
                        @foreach (KeyValuePair<string, string> kvp in menuItems)
                        {
                            <li><a href="#">@kvp.Key</a></li>
                        }
                    </ul>
                </li>
            </ul>

在测试后从扩展方法回发用户类型而没有在元素上设置任何样式，我发现下拉切换不起作用。在我看来，在从扩展方法回发后，下拉切换功能无效。

Answer 1

在发回后的启动带类切换下降后没有工作后，我进一步研究了这个问题。事实证明，登录后我重定向到的页面正在注册引导捆绑包，此捆绑包已经在布局级别注册，因此不需要再次注册，这导致引导带菜单行为失败页面无论是否隐藏或显示菜单上的任何项目。我也接受了Stephen Muecke的建议，现在我只使用扩展方法创建所需的列表项，而不是显示或隐藏项目。

编辑：添加现在扩展为IIdentity的代码。

                <ul id="toolsMenu" class="dropdown-menu" role="menu">
                    @{ 
                        var menuItems = User.Identity.GetUserMenuItems();
                    }
                    @foreach (KeyValuePair<string, string> kvp in menuItems)
                    {
                        <li id=@kvp.Key><a href="#">@kvp.Value</a></li>
                    }
                </ul>

同样解决方案是删除额外的......

   @Scripts.Render("~/bundles/bootstrap")

登录后用户被重定向的页面上的

。

Answer 2

您的li元素未显示，因为您可能始终将样式设置为style="display:none" 检查如果您的userType为＆gt; = 2

会发生什么

根据您的HTML代码，它应该工作。这是仅使用html和jquery的基本示例。

<div class="navbar-collapse collapse">

    <input type="button" id="toggleList" value="toggle" />

    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Tools</a>
            <ul class="dropdown-menu" role="menu">

                <li style="display:none"><a href="#">Tool1</a></li>
                <li style="display:none"><a href="#">Tool2</a></li>
                <li style="display:none"><a href="#">Tool3</a></li>
            </ul>
        </li>
    </ul>
</div>


<script type="text/javascript">
    $('#toggleList').on('click', function (event) {
        $('li').removeAttr('style');
    });
</script>

动态隐藏_Layout导航栏中的列表项未显示

2 个答案: