Home Making dropdown visible javascript
Reply: 1

Making dropdown visible javascript

Mik3NL
1#
Mik3NL Published in 2017-11-13 08:49:58Z

I made a dropdown system with razor script in Umbraco. I finally got all the children working but how do I hide the sub items that should be a dropdown list? I tried something with javascript but that seemed to open all dropdowns instead of each one individually.

Here's my code:

<div class="col-sm-3">
  <div class="well well-lg span-padding extra-padding top background-light">
    <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.Ancestor(1).Descendants("menu")) {
        foreach(var ItemChild in @item.Children("hoofdstuk")) { 
        <li> @ItemChild.Name </li>
          foreach(var Subitem in @ItemChild.Children) { 
          <li><a href = "@Subitem.Url"> @Subitem.Name </a></li>
              if (Subitem.Children.Any()) {
                foreach(var Finalitem in @Subitem.Children) { 
                  <ul>
                    <li> < a href = "@Finalitem.Url" > @Finalitem.Name </a></li>
                  </ul>
                }
              }
            }
          }
        }
      }
    </ul>
  </div>
</div>

Javascript:

function myFunction(a) {
    var itemcount = a.parentNode.getElementsByClassName("sub").length;
    for (i = 0; i < itemcount; i++) { 
        a.parentNode.getElementsByClassName("sub")[i].classList.toggle("show");
    }
}

This is what it displays:

Sub-Subtest1 and 2 needs to be hidden till we click it's ancestor which is SubTest1. Same goes for sub-subtest9.

I can't seem to get it working dynamically. If I create something with javascript it opens all the dropdown's at once and not individually.

Mario Lopez
2#
Mario Lopez Reply to 2017-11-13 10:29:12Z

First, I would recommend you to use Visual Studio, that will help you to fix issues with your code. You should fix your html structure and nest the elements of your list properly. You have li as direct children of li which is invalid.

<div class="col-sm-3">
    <div class="well well-lg span-padding extra-padding top background-light">
        <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.Ancestor(1).Descendants("menu"))
            {
                foreach (var ItemChild in item.Children("hoofdstuk"))
                {
                    <li class="item">
                        @if (ItemChild.Children.Any())
                        {
                            <ul class="submenu">
                                @foreach (var Subitem in ItemChild.Children)
                                {
                                    <li class="item">
                                        <a href="@Subitem.Url"> @Subitem.Name </a>
                                        @if (Subitem.Children.Any())
                                         {
                                            foreach (var Finalitem in Subitem.Children)
                                            {
                                                <ul class="submenu">
                                                    <li> <a href="@Finalitem.Url"> @Finalitem.Name </a></li>
                                                </ul>
                                            }
                                        }
                                    </li>

                                }
                            </ul>
                        }
                    </li>
                }
            }
        </ul>
    </div>
</div>

Then you can use jQuery to easily show the submenus. Use [children][1] to retrieve only the first level of submenus:

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

And your submenu should be hidden by default, you can do that with css:

.submenu{
    display: none;
}

Note: to make the code more clear I would recommend you to use Razor helpers to create a recursive function for your sublists.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.314326 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO