onclick one menu should be open in jquery - javascript

i want that on click of a main link its sublinks open when i click on any other main link its sublinks open and previous opened closes .at a time only one menu should be open.here is the fiddle http://jsfiddle.net/ZCrk4/6/
<!-- Wrapper -->
<div id="wrapper">
<!-- Container -->
<div id="container" class="resolution_800x600">
<!-- Colonnage -->
<div id="colonnes" class="clear">
<!-- Navigation Level 02 -->
<div id="nav1" class="navigation_02">
<ul>
<li>Menu 1
<ul>
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub menu 1</li>
<li>Sub menu 2</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
<li>Sub menu 4</li>
</ul>
</li>
<li>Menu 4
<ul>
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
</li>
</ul>
</div>
<!-- /Navigation Level 02 -->
</div>
<!-- /Colonnage -->
</div>
<!-- /Container -->
</div>
<!-- /Wrapper -->


DEMO
var nav = $('#nav1 > ul > li');
nav.find('li').hide();
nav.click(function () {
nav.not(this).find('li').hide();
$(this).find('li').slideToggle();
});
or
DEMO
var nav = $('#nav1 > ul > li');
nav.children('ul').children('li').hide();
nav.click(function () {
nav.children('ul').children('li').hide();
$(this).children('ul').children('li').show();
});


Like this?
JS:
$('.navigation_02 li:has("ul") > a').on('click', function (e) {
var $this = $(this);
$('.navigation_02 a.active').not($this).removeClass('active').next().stop(true, true).slideUp('slow');
$this.addClass('active').next().stop(true, true).slideToggle('slow');
});
CSS:
.navigation_02 > ul > li ul {
display:none;
}
.active{
font-style:bold;
background-color:#cecece;
}
Demo

Related

Add class to element when clicked elsewhere + condition on class presence

I'm having a sliding menu with sub-menus. I'm trying to hide an element in the navigation row when a user clicks one of the parent menu item that has a sub-menu (clicks on the expand arrow) + I want to show back the hidden element when the users clicks back to the top-level menu.
My menu's <ul> element get's a class of slide-menu-is-active-parent when any of the sub-menus is open.
This is a simple version of my row html:
<div class="navigation row">
<nav>
<ul id="nav-menu">
<li>Menu item 1</li>
<span class="submenu-button">
<ul class="sub-menu">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
<li>Menu item 2</li>
<span class="submenu-button">
<ul class="sub-menu">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="content-row">
[whatever content...]
</div>
I tried the following script to add a class od menu-open to the some-content element when both conditions are met: the user clicks on the sub-menu button and when the <ul id="nav-menu"> element get's the slide-menu-is-active-parent class when opened. And with the class added to my content row, I could use simple .content-row.menu-open{display:none} to hide it.
function($) {
$("#nav-menu .submenu-button").click(function(){
if ($('#nav-menu').hasClass('slide-menu-is-active-parent')) {
$('.content-row').addClass('menu-open');
} else {
$('.content-row').removeClass('menu-open');
}
});
});
But that doesn't work. Any tips on where my script is lacking?

To be honest, your code works: just add the slide-menu-is-active-parent class to the #nav-menu, and the content-row shows up on click. Still, I would do this differently - even if using jQuery. Here's a simplistic solution:
jQuery(document).ready(function($) {
// this click handler opens the sub-menu
$(".menu-item").on('click', function() {
$(this).find(".sub-menu").toggle()
})
// this click handler toggles the content-row
$(".sub-menu > li").on('click', function(e) {
// stopPropagation prevents the click event
// to bubble up to the menu-item parent
e.stopPropagation()
$(".content-row").toggle()
})
})
.d-none {
display: none;
}
.menu-item,
.sub-menu>li {
cursor: pointer;
}
.content-row {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation row">
<nav>
<ul id="nav-menu">
<li class="menu-item">Menu item 1
<ul class="sub-menu d-none">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
<li class="menu-item">Menu item 2
<ul class="sub-menu d-none">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="content-row d-none">
[whatever content...]
</div>

You need to use $(this) to refer to the element you clicked.
You also need to find parent with class, so you can use parents() with the name of your class.
NOTE : if i solved your problem, please next time do effort to make your question more clear, it will be better for everyone :)
$("#nav-menu .submenu-button").click(function(){
if ($(this).parents('#nav-menu').hasClass('slide-menu-is-active-parent')) {
$('.content-row').addClass('menu-open');
} else {
$('.content-row').removeClass('menu-open');
}
});
.content-row { display:none }
.menu-open { display:block }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation row">
<nav>
<ul id="nav-menu" class="slide-menu-is-active-parent">
<li>Menu item 1</li>
<span class="submenu-button">Button</span>
<ul class="sub-menu">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
<li>Menu item 2</li>
<span class="submenu-button">Button</span>
<ul class="sub-menu">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</ul>
</nav>
</div>
<div class="content-row">
[whatever content...]
</div>

How to add class to parent when child is visible?

I have a menu with a sub menu, when the sub menu is visible I want to add a class to parent list element.
<ul class="upper-menu">
<li>Item 1</li>
<li>Item 2</li>
<li class="parent-li">Item 3
<ul class="lower-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Item 4</li>
</ul>
Basically, when the "lower-menu" is visible, I want to add another class to the list element "parent-li". Also when the lower-menu is not visible, I want to the remove the class from "parent-li". Is this possible in JQuery?
Thanks

You can do by following jquery script
if($('.lower-menu').is(':visible')){
$(this).parent().addClass("YourClass");
}

You can select the desired element by :visible pseudo class and then assign your class to its parent:
$(".lower-menu:visible").closest('.parent-li').addClass("test");
.test {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="upper-menu">
<li>Item 1</li>
<li>Item 2</li>
<li class="parent-li">Item 3
<ul class="lower-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Item 4</li>
</ul>

Expand submenu list OL if any of the its list li has active class

I have tree structure based menu and by default sub list as closed, I want to show only that block of list which li anchor a has active class.
I tried few thing but i doing something wrong in targeting the right element.
Let us say i want to keep About section open as it has sub menu's and one of its elemnts has active class
<li><a href="#" class='active'>Mission</a></li>
<h1>Click on Contact</h1>
<div class="page-left-bar">
<ol id='expList'>
<li>Home</li>
<li>News</li>
<li>Contact
<ol>
<li>Sub menu</li>
<li>Sub menu long name</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ol>
</li>
<li>About
<ol>
<li><a href="#" class='active'>Mission</a></li>
<li>Vision</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ol>
</li>
</ol>
</div>
Fiddle Link https://jsfiddle.net/k2jqqbbk/1/

You can do that by placing the code in document.ready... kindly check the updated jsfiddle...
HTML
<h1>Click on Contact</h1>
<div class="page-left-bar">
<ol id='expList'>
<li>Home</li>
<li>News</li>
<li>Contact
<ol>
<li>Sub menu</li>
<li>Sub menu long name</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ol>
</li>
<li>About
<ol>
<li><a href="#" class='active'>Mission</a></li>
<li>Vision</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ol>
</li>
</ol>
</div>
JQUERY
$(document).ready(function(){
$("#expList > li").click(function () {
$(this).find("ol").slideToggle();
});
$('#expList > li').children().has('.active').css('display', 'block');
});

try this in jQuery:
$('.active').closest('ol').css('display', 'block');
https://jsfiddle.net/k2jqqbbk/3/

How to have KendoPanel's all the sections expand

I just started using KendoPanel and I am wanting to expand all the segments of the panel under certain condition. I am using following code to achieve that:
var panelbar = $("#KendoPanel").kendoPanelBar();
var kendoPanelbar = panelbar.data().kendoPanelBar;
kendoPanelbar.collapse($("li", panelbar.element));
Seems like it is contracting all the segments instead of expanding them. What am I doing wrong?

Please try with below code snippet.
<ul id="mypanelbar">
<li class="k-state-active">First Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Second Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Third Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Fourth Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Fifth Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>
<script>
var panelBar;
$(document).ready(function () {
panelBar = $("#mypanelbar").kendoPanelBar().data("kendoPanelBar");
// Expand all item
panelBar.expand($("#mypanelbar li.k-item"));
});
</script>
Let me know if any concern.

How to make submenu for jQuery sliding side menu?

Is there a way to make submenu for sliding side menu?
JS Fiddle demo
<ul id="nav">
<li>Menu Item 1</li>
<ul id="submenu">
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
</ul>
<li>Menu Item 2</li>
</ul>

Fiddle DEMO
Changed Markup
added ul instead of li as ul can not directly contain ul
<div id="menu">
<ul>
<li>Menu Item 1
<ul id="submenu"> <!-- added ul instead of li -->
<li>Submenu Item 1
</li>
<li>Submenu Item 2
</li>
</ul>
</li>
<li>Menu Item 2
</li>
<li>Menu Item 3
</li>
</ul>
</div>
<div id="right">
<button type="button" id="button">Menu</button>
</div>
JS
$('#menu li:has("ul")').children('ul').hide(); //hide submenu
$('#button').toggle(
function () {
$('#right').animate({
left: 150
});
},
function () {
$('#right').animate({
left: 0
});
});
$('#menu li:has("ul")').click(function(){
$(this).children('ul').slideToggle(); //toggle submenu
});
References
.slideToggle()
:has()

Categories

Resources