Hide / Show sidebar submenu

Navigation
1

I need to show and hide the sub-menu by clicking for example on the word Libros and that I display the items that it has. I need the code below: 

function openNav() {
    document.getElementById("sidr").style.width = "300px";
}

function closeNav() {
    document.getElementById("sidr").style.width = "0";
}
.sidr {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidr a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidr a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidr .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
.sidr .sidr-inner {
	padding: 0 0 15px
}
.sidr .sidr-inner>p {
	margin-left: 15px;
	margin-right: 15px
}
.sidr.right {
	left: auto;
	right: -260px
}
.sidr.left {
	right: auto
}
.sidr h1, .sidr h2, .sidr h3, .sidr h4, .sidr h5, .sidr h6 {
	font-size: 18px;
	font-weight: normal;
	margin: 0 0 10px;
	color: #fff;
	line-height: 24px;
	text-transform:uppercase;
}
.sidr .sidr-widgets{
	float:left;
	width:100%;
	padding:0 15px;
}
.sidr p {
	font-size: 13px;
	margin: 0 0 12px
}
.sidr p a {
	color: rgba(255,255,255,0.9)
}
.sidr>p {
	margin-left: 15px;
	margin-right: 15px
}
.sidr ul {
	display: block;
	margin: 0 0 15px;
	padding: 0;
}
.sidr ul li {
	display: block;
	margin: 0;
}
.sidr ul li:hover, .sidr ul li.active, .sidr ul li.sidr-class-active {
}
.sidr ul li:hover>a, .sidr ul li:hover>span, .sidr ul li.active>a, .sidr ul li.active>span, .sidr ul li.sidr-class-active>a, .sidr ul li.sidr-class-active>span {
	color:#fff
}
.sidr ul li a, .sidr ul li span {
	display: block;
	text-decoration: none;
	color: #ccc;
	font-weight:normal;
	text-transform:capitalize;
	line-height: normal;
}
.sidr ul li ul {
	border-bottom: none;
	margin: 0;
	background:rgba(0,0,0,0.3)
}
.sidr ul li ul li {
	line-height: 40px;
	font-size: 13px
}
<div id="sidr" class="sidr left">
			<div class="clearfix clear"></div>
			<div id="mobile-header2">
           <a id="responsive-menu-button2"  onclick="closeNav()">
            	    &times;
            </a>
      </div>
			<div class="clearfix clear"></div>

			<div class="kf-sidebar">
				<div class="row">
	    			<!--DL Menu Start-->
		            <div id="kode-responsive-navigation" class="dl-menuwrapper">
		                <ul class="dl-menu">
							<li><a>Libros</a>
								<ul class="dl-submenu">
                                    <li>Item</a></li>
					                           <li>Item</a></li>
                                    <li>Item</a></li>
		                        </ul>
							</li>
		                    <li><a>Niños</a>
		                        <ul class="dl-submenu">
		                            <li><b>Edades</b></li>
					                <li>Item</a></li>
                                    <li>Item</a></li>
		                        </ul>
		                    </li>
                          </ul>  
		            </div>
		            <!--DL Menu END-->
				</div>
			</div>
</div>

<div id="mobile-header" onclick="openNav()">
	  <a id="responsive-menu-button">&#9776;</a>
</div>

If it can be done with Javascript , it would be very helpful.

    
asked by ItzyV 13.06.2017 в 19:38
source

2 answers

0

function openNav() {
    document.getElementById("sidr").style.width = "300px";
}

function closeNav() {
    document.getElementById("sidr").style.width = "0";
}
$("li.submenu > ul").hide()
$('li.submenu').click(function() {
   $('ul.submenu').not(this).find('ul').hide();
   $(this).find('ul').slideToggle();
});
        $('li.submenu > ul > li').click(function(e) {
        e.stopImmediatePropagation();  
    });
    .sidr {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
    }

    .sidr a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    .sidr a:hover, .offcanvas a:focus{
        color: #f1f1f1;
    }

    .sidr .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    .sidr .sidr-inner {
    	padding: 0 0 15px
    }
    .sidr .sidr-inner>p {
    	margin-left: 15px;
    	margin-right: 15px
    }
    .sidr.right {
    	left: auto;
    	right: -260px
    }
    .sidr.left {
    	right: auto
    }
    .sidr h1, .sidr h2, .sidr h3, .sidr h4, .sidr h5, .sidr h6 {
    	font-size: 18px;
    	font-weight: normal;
    	margin: 0 0 10px;
    	color: #fff;
    	line-height: 24px;
    	text-transform:uppercase;
    }
    .sidr .sidr-widgets{
    	float:left;
    	width:100%;
    	padding:0 15px;
    }
    .sidr p {
    	font-size: 13px;
    	margin: 0 0 12px
    }
    .sidr p a {
    	color: rgba(255,255,255,0.9)
    }
    .sidr>p {
    	margin-left: 15px;
    	margin-right: 15px
    }
    .sidr ul {
    	display: block;
    	margin: 0 0 15px;
    	padding: 0;
    }
    .sidr ul li {
    	display: block;
    	margin: 0;
    }
    .sidr ul li:hover, .sidr ul li.active, .sidr ul li.sidr-class-active {
    }
    .sidr ul li:hover>a, .sidr ul li:hover>span, .sidr ul li.active>a, .sidr ul li.active>span, .sidr ul li.sidr-class-active>a, .sidr ul li.sidr-class-active>span {
    	color:#fff
    }
    .sidr ul li a, .sidr ul li span {
    	display: block;
    	text-decoration: none;
    	color: #ccc;
    	font-weight:normal;
    	text-transform:capitalize;
    	line-height: normal;
    }
    .sidr ul li ul {
    	border-bottom: none;
    	margin: 0;
    	background:rgba(0,0,0,0.3)
    }
    .sidr ul li ul li {
    	line-height: 40px;
    	font-size: 13px
    }
.hide-dl-submenu > li {
   display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidr" class="sidr left">
    			<div class="clearfix clear"></div>
    			<div id="mobile-header2">
               <a id="responsive-menu-button2"  onclick="closeNav()">
                	    &times;
                </a>
          </div>
    			<div class="clearfix clear"></div>

    			<div class="kf-sidebar">
    				<div class="row">
    	    			<!--DL Menu Start-->
    		            <div id="kode-responsive-navigation" class="dl-menuwrapper">
    		                <ul class="dl-menu hide-dl-submenu">
    							<li class="submenu"><a>Libros</a>
    								<ul>
                                        <li class="final"><a>Item</a></li>
    					                           <li class="final"><a>Item</a></li>
                                        <li class="final"><a>Item</a></li>
    		                        </ul>
    							</li>
   
                              </ul>  
    		            </div>
    		            <!--DL Menu END-->
    				</div>
    			</div>
    </div>

    <div id="mobile-header" onclick="openNav()">
    	  <a id="responsive-menu-button">&#9776;</a>
    </div>
    
answered by 13.06.2017 / 20:24
source
0

Good, you just have to add the following:

Add in the CSS: 

.hide-dl-submenu > ul {
   display:none;
}

In each li main add this event click: 

<li onclick="mostrarSubMenus(this)"><a>Libros</a>
   <ul class="dl-submenu">
                                    <li>Item</a></li>
                                               <li>Item</a></li>
                                    <li>Item</a></li>
                                </ul>
                            </li>

In javascript: 

function mostrarSubMenus(elemento)
{
 if(elemento.className.indexOf('hide-dl-submenu'))
{
  elemento.classList.remove("hide-dl-submenu");
}
else{
elemento.classList.add("hide-dl-submenu")
}

}

    
answered by 13.06.2017 в 19:55
Error: Call to a member function get Startdate () on null Problem / Doubt with Spring Security and Spring Boot