Develop Reference

Sub-menu appear on click for that menu item only

I've been looking at this for a while and I'm not sure how to target this.
When I have a menu where the top level menu items have dropdowns, I can write the CSS/JS so that when the button clicks, it shows the dropdown. But when you click one of the buttons, it opens up ALL the dropdowns.
How do I specifically target so that when you click a menu button, it only opens up the sub-menu for that specific button.
<li id="Menu-item-2135" class="menu-item">Menu 1
<ul class="sub-menu">
<li>list item 1</li>
<li>list item 2</li>
</ul></li>
//The JS
$('#menu-item-2135').click(function(){
$('.sub-menu').toggleClass('active');
});
//The CSS
.sub-menu {
display:none;
&.active {
display:flex;
}
}
I have been using the menu item ID to target the menu items and using toggleClass('active') for making the sub-menu appear/hide but this means that anytime I add a new menu item to the site that then has a sub-menu, I had to write the JS for that menu ID. Just wondering if there is a way to tweak this so it does all this without needing to specially write it for every menu ID.

I use .find() to find submenu on clicked element, then , if you need, close all opened submenus before with line $('.menu-item').each((i,e)=>{$(e).find('.sub-menu').removeClass('active')}) if you don't neeed that - just remove
$('.menu-item').each((index,element)=>{
$(element).on('click', ()=>{
$('.menu-item').each((i,e)=>{$(e).find('.sub-menu').removeClass('active')}) // if you need to close other sub-menu
$(element).find('.sub-menu').toggleClass('active')
})
})
.sub-menu {
display:none;
}
.sub-menu.active {
display:flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="menu-item">Menu 1
<ul class="sub-menu">
<li>list item 1</li>
<li>list item 2</li>
</ul>
</li>
<li class="menu-item">Menu 2
<ul class="sub-menu">
<li>list item 1</li>
<li>list item 2</li>
</ul>
</li>

jquery slidetoggle list without list elements trigger the effect

I am quite new to everything about html/js/css. Right now i need a list so i decided to use a list that u can slidetoggle. I looked it up and found how to recreate that effect (the code below):
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer ul li").filter(":has(ul)");
linkClick.click(function () {
$(this).find('ul li').slideToggle(200);
});
(if you are wondering about the 2 ul and li, it is because i want that list in another list, but that doesn t change the question so i didn t include it in my explanation)
Since i am quite new to this topic, i only understand like 70% of what is happening. But for my project i need to work with the elements of the list(the ones which were hidden and after sliding down visible). I want to do stuff that requires clicking them like highlight on click, but now i encounter the problem, that the code i posted makes the slide effect being triggered not only by the headline, but also by the elements. So i cannot click elements without minimizing the list with the same click (obviously the elements are hidden again then). I hope you guys can explain me how to make the function only be triggered by the head object and not by the whole list element(head and the expanded list).

Look the slide effect is being triggered not only by the headline but also by the elements that are because the concept of event bubbling which basically means in case of click event if you clicked a child element the event is bubbled by default to the parent elements tree till the document level firing any registered event handler. so when you click the element you click the headline too, so you need to add another child element and handle the click on it something like this:-
<div class="tableContainer">
<ul>
<li> <span>menu 1</span>
<ul>
<li>link 1</li>
</ul>
</li>
<li><span> menu 2</span>
<ul>
<li>link 2</li>
</ul>
</li>
<li><span> menu 3</span>
<ul>
<li>link 3</li>
</ul>
</li>
<li> <span>menu 4</span>
<ul>
<li>link 4</li>
</ul>
</li>
</ul>
</div>
$(function() {
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer span");
console.log(linkClick.length);
linkClick.click(function() {
console.log('clicked');
$(this).siblings('ul').slideToggle(200);
});
});
Full Working Example Here
Hope this answers your question.

How to not toggle all menus at the same time

I'm working with Boostrap for the first time ever, please don't kill me :D
I have a problem with my navigation bar. I have 7 menus, each with a dropdown of its own. The problem is that when I click on a menu, they all dropdown at the same time, and I need only to dropdown the one I clicked on. My JS code is pretty rudimentary.
This is what I used so far:
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
And the HTML code is this, (example for one menu; each menu has a similar code):
<li class="dropdown">
Organizare <b class="caret"></b
<ul class="dropdown-menu">
<li>Conducere</li>
<li>Consiliu</li>
<li>Departamente</li>
<li>Administratie</li>
<li>Secretariat</li>
</ul>
</li>
What do I need to change so that only the menu I click on dropdown ?
Thanks!

Find the menu following the toggle:
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').toggle();
});
Example: http://codepen.io/paulroub/pen/YXKzGm

If you have multiple menus, I prefer to use this:
$(document).ready(function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').slideUp();
$(this).next('dropdown-menu').slideDown();
);
});
The advantage to this is that it will close any other open dropdown menus and then open the one that has been clicked.
It can be further improved to check if the .dropdown-toggle that was clicked is currently open.

The issue is that the handler you're registering will select anything with the class dropdown-menu, then toggle it, because you've written:
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
As you say, you don't want to toggle everything with that class, you just want to toggle what was clicked, so you should use the event parameter from click() to find what's been clicked, and select the relevent dropdown-menu to toggle:
$('.dropdown-toggle').click(function(e) {
$(e.target).next('.dropdown-menu').toggle();
});

I was able to do it with this HTML
Dropdown 1<span class="caret"></span>
<ul class="dropdown-menu dd1" role="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu dd2" role="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
and this jQuery:
$(".dropdown-toggle").click(function(e) {
$(this).next('.dropdown-menu').toggle();
});
NOTE:
just the the JS did not work for me.
data-toggle, bootstrap seems to use this to identify which <ul> to toggle based on class name.
used that in combination with Paul Roub's answer to override the default behavior.

How to select a content from dropdown and be the first one to be appeared in Boostrap

I'm trying to select the content I click and this content has to be the first one to be selected. Like the select option.
This is the img.
I'm not quite sure how to make this, this is my demo: http://jsbin.com/jazej/1#0
Basically the part of the code is this.
<li class="dropdown">
Select Card <b class="caret"></b>
<ul class="dropdown-menu" id="indexCards">
<li class="active">Card 1</li>
<li class="">Card 2</li>
<li class="">Card 3</li>
<li class="">Card 4</li>
</ul>
</li>
But I can't get no event fire or something when I do $('#indexCards'). Any idea about this?

Try this : Read text of the clicked anchor inside indexCards and put it in selectCard
$(function(){
$('#indexCards li a').click(function(){
$('.active').removeClass('active');
$(this).closest('li').addClass('active');
var text = $(this).text();
$('#selectCard').html(text+'<b class="caret"></b>');
});
});

jQuery drop-down navigation using unordered lists

I'm trying to make a navigation dropdown with jQuery that looks like this:
<ul id="home" >
<li class="navtab">TABANME</li>
<li class="homesub">Some link</li>
<li class="homesub">Some link</li>
<li class="homesub">Some link</li>
</ul>
The <li> .navtab is visible at all times - the sub-menu items start out hidden. I've attached the .hover() to the <ul> element (#home), but when the cursor enters the sub-menu <li> elements, the mouseout for #home fires, and the sub-menu items hide.
I know this has to do with event bubbling and mouseover/mouseout, but I can't figure out the logic of how to keep the menu open while the cursor is over the entire <ul>. The jQuery I currently have is:
$('#thome').hover(
function(){
tabShowSubnav($(this).attr('id'))
},
function(){
tabHideSubnav($(this).attr('id'))
});
function tabShowSubnav(menu){
var tb = '#' + menu;
var sb = '.' + menu.slice(1) + 'sub';
$(tb).css('height','239px');
$(sb).show();
}
Any suggestions?

Do yourself a huge favour and change how you structure your menu markup to:
<ul id="home" >
<li class="navtab">
TABANME
<ul class="submenu">
<li>Some link</li>
<li>Some link</li>
<li>Some link</li>
</ul>
</li>
</ul>
And put the hover event on li.navtab to make the submenu visible. You'll find this much easier to do. For example, the CSS:
ul.submenu { display: none; }
with:
$(function() {
$("li.navtab").hover(function() {
$(this).children("ul.submenu").show();
}, function() {
$(this).children("ul.submenu").hide();
});
});
and you're most of the way there.
That all being said, I'd highly suggest using an existing jQuery menu plugin. There are lots of these about. I've had relatively good experience with superfish. There's little point reinventing this particular wheel.