ナビゲーションバーのスクロールを停止する - Umbraco

Question

自分の問題に関して何かを見つけることができなかったので、自分自身を投稿することにしました。

私はドロップダウンメニューを持つナビゲーションバーを使用しています。ドロップダウンを開いてそのページの1つに移動すると、ナビゲーションがリフレッシュされ、ドロップダウンメニューが閉じます。私がページの1つに行くときにドロップダウンメニューを開いたままにする必要があります。私はModel.Content.AncestorOrSelf().Descendants("document")を試してみました。ここで

は私のメニュー構造です：「ブラウザごとHulp」の下に

すべてがドロップダウンであると私は再び「ブラウザごとのHulp」をクリックすると消えます。私はすべての作品ときのページからスクリプトやスタイルを取り除くことに計画を行う

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage 
<div class="col-sm-3"> 
    <div class="NavDigiCampuz"> 
     <h3>Helpcentrum</h3> 
     <li class="NoBullet"><a class="NormalA" href="https://digicampuz.nl/">Terug naar digicampuz</a></li><br> 
      <ul class="nav nav-list tree"> 
       @{         
        var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id. 
        var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root. 
       } 

       @foreach(var item in Model.Content.AncestorOrSelf(2).Descendants("document").ToList()){ 
        foreach (var ItemChild in @item.Children("categorieMenu")){ 
         if(ItemChild.Children.Any()) 
         { 
         <li class="MenuItems"><p>@ItemChild.Name</p></li> 
          foreach (var Subitem in @ItemChild.Children){ 
           if (Subitem.Children("hoofdstuk").Any()) 
           { 
            <li class="item"> 
             @if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") { 
              <a class="NormalA aNav" href="#"><i class="fa fa-@(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> @Subitem.Name <i id="Arrow" class="fa fa-arrow-right" style="font-size:10px;" aria-hidden="true"></i></a> 
             }else{ 
              <a class="NormalA aNav" href="#">@Subitem.Name <i id ="Arrow" class="fa fa-arrow-right" style="font-size:10px;" aria-hidden="true"></i></a> 
             } 
             @foreach (var Finalitem in @Subitem.Children){ 
             <ul class="submenu"> 
              @if(Finalitem.GetPropertyValue("hoofdstukIcoon") != "") { 
              <br><li><a class="NormalA aNav" href="@Finalitem.Url"><i class="fa fa-@(Finalitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i>@Finalitem.Name </a></li> 
              }else{ 
               <br><li><a class="NormalA aNav" href="@Finalitem.Url">@Finalitem.Name</a></li><br> 
              } 
             </ul> 
             } 
            </li> 
            }else 
             { 
              if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") { 
               <li><a class="NormalA aNav" href="@Subitem.Url"><i class="fa fa-@(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> @Subitem.Name</a></li> 
              }else{ 
               <li><a class="NormalA aNav" href="@Subitem.Url">@Subitem.Name</a></li> 
              } 
            } 
           } 
          } 
         } 
        } 
      </ul> 
    </div> 
</div> 

<script> 
    $(".item").click(function(){ 
     $(this).children(".submenu").toggle(); //it will display or hide your submenu when clicking the item. 
    }); 
</script> 

<style> 
    .submenu{ 
    display: none; 
    list-style:none; 
    } 
</style>  

：

は、ここに私のコードです。あなたはコード内でいくつかの問題を持っている

Answer 1

まず最初：

• 子供をフィルタリングするところを削除し、var selection = Umbraco.TypedContent(documentRootNodeId).Children("Visible");
• のようにそれを維持するには、文字列にあなたのhoofdstukIcoonキャストSubitem.GetPropertyValue<string>("hoofdstukIcoon")
• 最初<li class="noBullet">はあなたにする必要がありますnav-list、外部ではありません。
• 余白にCSSを使用する場合は、リスト項目の間に<br>を入れないでください。

ここでは、サブメニューの問題に焦点を当てます。あなたのjavascriptで何をしているのかは、displayプロパティを使ってサブメニューを隠すか表示するだけですが、ページがレンダリングされるとき、Razorは隠されているかどうかわかりません。これを解決するには、RazorとJavascriptで使用できる.visibleのような新しいクラスを作成する必要があります。

@foreach (var Finalitem in Subitem.Children)から<ul class="submenu">を移動する必要があります。現在、あなたは何をしているのか、それぞれに1つのアイテムで新しいリストを作成しているからです。

また、子供がいないが場合は、あなたのサブメニューの前に条件を含める必要がありますし、我々はそれがdiplayするかどうかを持っている場合はカミソリを使ってサブメニューを伝える方法がこれをやっているサブメニュー@if (Subitem.Children.Any()) {

を望んでいません。

var isVisible = Model.Content.IsDescendantOrSelf(Subitem) ? "visible" : ""; 
<ul class="submenu @isVisible"> 

この例では、現在のページがこのサブアイテムかその子かどうかを示すサブメニューが表示されます。

そして、あなたのJSスクリプトは、このなる：

$(".item").click(function() { 
     $(this).children(".submenu").toggleClass('visible'); //it will display or hide your submenu when clicking the item. 
}); 

そして、あなたのCSSこの：

<style> 
    .submenu { 
     display: none; 
     list-style: none; 
    } 

    .submenu.visible { 
     display: block; 
    } 
</style>