Develop Reference

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>

Make parent link unclickable in submenu toggle

I am trying to make a sub-menu toggle on mobile but it keeps on redirecting to the parent menu link and adding event.preventDefault(); making entire sub-menu links unclickable. Any idea how to make only first .has-childern a link unclickable?
Markup
<div class="menu-container">
<ul class="nav-menu">
<li class="menu item"> Home </li>
<li class="menu-item has-childern"> About
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu-item has-childern"> Services
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu item"> Contact </li>
</ul>
</div>
jQuery
jQuery(document).ready(function(){
jQuery('.menu-container .submenu').hide();
jQuery('.menu-container .has-childern a').click(function() {
event.preventDefault();
jQuery(this).parent().children('.submenu').toggle();
});
});
JsFiddle https://jsfiddle.net/p5fLsvcq/

You code affect all nested children instead just direct child
use '>' for select just a direct first level child in selector:
jQuery('.menu-container .has-childern > a').click(/*...*/)

Find ul with a specific li item in a collection of ul and than add class to it

I have a collection of unordered lists. I would like to iterate through this list and than find an specific li item and than add a class to the ul containing that li.
I hope I was clear enough for you guys. Let me show you my code for better understanding.
This is a fiddle I created to help you understand my problem.
https://jsfiddle.net/wdwn9swu/
This is what I tried to target the ul I need but it didn't work.
if ($('ul.sub-tab').find('ul.sub-tab > li.super-active')) {
$('ul.sub-tab').find('li.super-active').addClass('super-active');
}
I would like that on of the lists that corresponds with the id, to always be open.
Any idea guys ?? Thanks!!

I think the easiest and simplest way is:
$("li.super-active").parent().addClass("super-active");
According the fact you are using valid html <li> element parent must be <ul> element in that case (can also be <ol>).
$('.main-tab>li a').click(function() {
$(this).siblings('.sub-tab').slideToggle(200);
$(this).parent().siblings('li').children('.sub-tab').slideUp(200);
});
$('.main-tab li').each(function() {
id = '10';
$links = $(".main-tab li[data-id =" + id + "]");
$links.addClass("super-active");
//console.log("1234");
});
$("li.super-active").parent().addClass("super-active");
console.log($(".super-active"));
.main-tab ul {
padding-left: 10px;
}
.sub-tab {
display: none;
}
.super-active img {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="center">
<ul class="main-tab">
<li data-id="5">
Main 1
<ul class="sub-tab">
<li data-id="7">
Main 1 Sub 1
<ul class="sub-tab">
<li data-id="10">Sub 2</li>
<li data-id="11">Sub 2</li>
</ul>
</li>
<li>
Main 1 Sub 2
<ul class="sub-tab">
<li data-id="12">Sub 2</li>
<li data-id="13">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="8">
Main 2
<ul class="sub-tab">
<li data-id="9">
Main 2 Sub 1
<ul class="sub-tab">
<li data-id="14">Sub 2</li>
<li data-id="15">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="3">
Main 3
<ul class="sub-tab">
<li data-id="25">
Main 3 Sub 1
<ul class="sub-tab">
<li data-id="17">Sub 2</li>
<li data-id="18">Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>

Use jQuery's :has selector:
Selects elements which contain at least one element that matches the
specified selector.
Find ul.sub-tab that has a list item with .super-active class, and add the class .super-active to the ul as well:
$('ul.sub-tab:has(li.super-active)').addClass('super-active');
Example:
$('ul.sub-tab:has(li.super-active)').addClass('super-active');
.sub-tab.super-active {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<ul class="main-tab">
<li data-id="5">
Main 1
<ul class="sub-tab"> <!-- this will be removed -->
<li data-id="7" class="super-active">
Main 1 Sub 1
<ul class="sub-tab">
<li data-id="10">Sub 2</li>
<li data-id="11">Sub 2</li>
</ul>
</li>
<li>
Main 1 Sub 2
<ul class="sub-tab">
<li data-id="12">Sub 2</li>
<li data-id="13">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="8">
Main 2
<ul class="sub-tab">
<li data-id="9">
Main 2 Sub 1
<ul class="sub-tab">
<li data-id="14">Sub 2</li>
<li data-id="15">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="3">
Main 3
<ul class="sub-tab">
<li data-id="25">
Main 3 Sub 1
<ul class="sub-tab">
<li data-id="17">Sub 2</li>
<li data-id="18">Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>

onclick one menu should be open in jquery

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

jQuery expandable menu

<div id="firstDiv">
<div id="secondDiv">
<ul id="accordionMenu">
<li>menu item</li>
<li>menu item
<ul>
<li>suboption 1</li>
<li>suboption 2</li>
</ul>
</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
</div>
How to make it expandable?
I have the following JavaScript code:
$(document).ready(function() {
// Collapse everything but the first menu:
$("#accordionMenu > li > a").not(":first").find("+ ul").slideUp(1);
// Expand or collapse:
$("#accordionMenu > li > a").click(function() {
$(this).find("+ ul").slideToggle("fast");
});
});

#Yoshi: Thank you. I'll add the answer here, hope will help others
HTML
<div id="firstDiv">
<div id="secondDiv">
<ul id="accordionMenu">
<li>menu item</li>
<li>menu item
<ul>
<li>suboption 1</li>
<li>suboption 2</li>
</ul>
</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
</div>
jQuery:
// Collapse everything but the first menu:
$("#accordionMenu > li > a").not(":first").find("+ ul").slideUp(1);
// Expand or collapse:
$("#accordionMenu > li > a").click(function() {
$(this).find("+ ul").slideToggle("fast");
});​
Don't forget to include jQuery library :)