Question

我在一个小的asp.net项目中使用水平导航的问题。导航包含登录，配置文件和注销锚点，如果您已登录，则会显示该锚点。

我通过在Code Behind中设置.Visible属性来实现这种行为。

现在我想在每个元素之后添加一个管道作为“分隔符”。这不能是实际列表项本身的一部分，因为它会搞砸a：hover效果。

但即使元素在DOM树中不，也会显示die pipe-divider。看起来像

登录| | |

我试过用

解决它

if ($("li.nav-item").length == 0) {
            $('span.divider').remove();
        }
        if ($("li.nav-item").length > 0 && $("li.nav-item").is(':visible')) {
            $('<span class="divider"> | </span>').appendTo('li.nav-item');
        }

但这不起作用。我该如何解决这个问题？

亲切的问候。

/ edit：html标记（已编辑的ID）

<ul id="navigation">
                <li class="nav-item"><asp:HyperLink ID="link1" runat ="server" Text="LoremIpsum"      NavigateUrl="#" /></li>
                <li class="nav-item"><asp:LinkButton ID="LoremIpsum" runat ="server" Text="LoremIpsum" PostBackUrl="~/#.aspx"  /></li>
                <li class="nav-item"><asp:HyperLink ID="link2" runat="server"  Text="LoremIpsum" NavigateUrl="#.aspx"/></li>
                <li class="nav-item"><asp:HyperLink ID="linkLogin" runat="server" Text="Login" NavigateUrl="~/login.aspx"/></li>
                <li class="nav-item"><asp:HyperLink ID="linkProfile" runat="server" Text="Profile" NavigateUrl="~/profile.aspx" Visible="false"/></li>
                <li class="nav-item"><asp:HyperLink ID="linkLogout" runat="server" Text="Logout" NavigateUrl="~/logout.aspx" Visible="false"/></li>
                <li><asp:HyperLink ID="LoremIpsum" runat="server" Text="LoremIpsum" NavigateUrl="~/nutzungsbedingungen.aspx"/></li>
                </ul>


if (Session["svar_loggedin"] != null)
    {
        linkLogin.Visible = false;
        linkProfile.Visible = true;
        linkLogout.Visible = true;
    }
    else
    {
        linkLogin.Visible = true;
        linkProfile.Visible = false;
        linkLogout.Visible = false;
    }

Answer 1

试试这个js：

$.each($("li.nav-item").children("a").filter(":visible"), function (e) {
    $('<span class="divider"> | </span>').appendTo($(this));
});

编辑：

使用css而不是Visible属性：

linkLogin.Attributes.Add("style", "display:none")

或alt。遍历控件，检查visible == true，如果是，则将span-markup添加到Text-attribute

Answer 2

  $(function () {
        var elements = $('li.nav-item > a').filter(':visible');
        for (var i = 0; i < elements.length - 1; i++) {
            elements.eq(i).append($('<span class="divider"> | </span>'));
        }

    });

就我而言，这就是诀窍。我没有意识到我的Code Behind正在改变asp：Hyperlink控件而不是列表项。

我相应地改变了我的Jquery Snippet，以便与所有具有“nav-item”类的list-items的子节点相关联。

谢谢大家让我回到正轨！

webforms：如果隐藏项目，如何删除DOM元素

2 个答案: