0

小さなasp.netプロジェクトで使用している水平ナビゲーションに問題があります。ナビゲーションには、ログイン、プロファイル、およびログアウトのアンカーが含まれており、ログインしているかどうかにかかわらず表示されます。

コード ビハインドで .Visible 属性を設定することで、この動作を実現しています。

ここで、すべての要素の後にパイプを「仕切り」として追加したいと考えています。これは、a:hover 効果を台無しにするため、実際のリスト項目自体の一部であってはなりません。

ただし、要素がDOM ツリーにない場合でも、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;
    }
4

2 に答える 2

2

代わりにこの js を試してください:

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

編集：

Visible プロパティの代わりに css を使用します。

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

または代替。コントロールを反復処理し、表示 == true かどうかを確認します。表示されている場合は、テキスト属性にスパン マークアップを追加します

于 2012-09-17T08:29:31.080 に答える
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>'));
        }

    });

私の場合、これでうまくいきました。コード ビハインドがリスト アイテムではなく asp:Hyperlink コントロールを変更していることに気付きませんでした。

クラス「nav-item」を持つリストアイテムの子であるすべてのアンカーに関連するように、それに応じてJquery Snippetを変更しました。

私を軌道に乗せてくれてありがとう！

于 2012-09-17T11:09:08.237 に答える