Develop Reference

jquery hide/show submenu while keeping the first submenu active along with main menu

I have a navbar with three menus & its msg. I am implementing the show/hide message on the main menu click. I am able to make the first menu active & show/hide the message, but How to make the first message active(show default along with its menu)that is where I am getting a problem.
My Html is
<ul class="nav justify-content-center ">
<li class="nav-item active main-menu">
<a class="nav-link " href="#">Mango</a>
<div class="msg active">
<p class="position">You selected Mango</p>
</div>
</li>
<li class="nav-item main-menu">
<a class="nav-link " href="#">Banana</a>
<div class="msg">
<p class="position">You selected Banana</p>
</div>
</li>
<li class="nav-item main-menu">
<a class="nav-link " href="#">Grapes</a>
<div class="msg ">
<p class="position">You selected Grapes</p>
</div>
</li>
</ul>
The javascript is:
//add remove class
$(".nav li").on("click", function() {
$(".nav li, .nav li a").removeClass("active");
$(this).addClass("active");
})
//show hide message
$(".main-menu .msg ").hide();
$(".main-menu a").click(function() {
$(".main-menu .msg").hide('fast');
$(this).parent().find("div").toggle("fast");
})
In this case, the first menu is active while the message show only on its click. How to make the first message active or how to show the first message default with its menu.

As per your question, what I understood is,
you want the first menu to be open on the first load, if this is the case you need, you need to change it a bit,
Remove the hide line from your jQuery code, and make the msg div disappear by applying css on it. and then add active class only on first msg div and make it visible by CSS only.
//add remove class
$(".nav li a").on("click",function(){
$(".nav li a").removeClass("active");
$(this).addClass("active");
$(".nav li a").not(this).next().slideUp();
$(this).next().slideToggle();
});
.msg {
display: none;
}
.msg.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav justify-content-center ">
<li class="nav-item active main-menu">
<a class="nav-link active" href="#">Mango</a>
<div class="msg active"><p class="position">You selected Mango</p></div>
</li>
<li class="nav-item active main-menu">
<a class="nav-link " href="#">Banana</a>
<div class="msg"><p class="position">You selected Banana</p></div>
</li>
<li class="nav-item active main-menu">
<a class="nav-link " href="#">Grapes</a>
<div class="msg"><p class="position">You selected Grapes</p></div>
</li></ul>

Add CSS
.msg{
display:none;
}
.active .msg{
display:block;
}
https://jsfiddle.net/lalji1051/6Lj82emb/4/

just added id #labl to message div and did following changes.
$(".lab .msg ").hide();
$(".lab #labL ").show();
$(".lab a").click(function () {
$(".lab .msg, .lab #labL").hide('fast');
$(this).parent().find("div").toggle("fast");
})

Add css class to dropdown menu on menu item click

I have bootstrap 3 menu. And I want to add class to "dropdown" menu if usre click on "caret" ( parent menu item )
<ul id="menu-testing-menu" class="nav navbar-nav sf-js-enabled" style="touch-action: pan-y;">
<li class="menu-item menu-item-has-children dropdown">
<a class="sf-with-ul" data-toggle="dropdown">Home<span class="caret"></span></a>
<ul class="dropdown-menu" style="display: none;">
<li class="menu-item">
Lorem Ipdum
</li>
<li class="menu-item">
Lorem Ipdum
</li>
<li class="menu-item">
Lorem Ipdum
</li>
</ul>
</li>
</ul>
So I try to use js
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$(this).find('.dropdown-menu').toggleClass('dd-menu-show');
});
but it doesn't work. How to solve thise problem?

$(this).find('.dropdown-menu') is not possible when clicking .caret because $(this) is looking inside the current element and it is empty.
You might also want to consider adding the click event to the entire <a>.
Try this
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
var parent = $(this).closest('.dropdown');
parent.find('.dropdown-menu').toggleClass('dd-menu-show');
});

.find() searches for a node inside the selected node. You are selecting the .caret span element, so it's trying to find a .dropdown-menu node inside that, which of course does not exist. You'll want to navigate up the tree to the .dropdown node, and then do your find() call.

$(this).find(".dropdown-menu") will not work because there is no element in the current clicked element with class dropdown-menu.
So just try :
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$('.dropdown-menu').toggleClass('dd-menu-show');
});

You can do it in this way.
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$(this).parent().next('.dropdown-menu').toggleClass('dd-menu-show');
});

Jquery - How to add active class to entire navigation menu path?

I have a menu with 3 levels, and I would like to use a class for the first active li and a second class for all other subsequent li. When I click on a selection the level 3 to remain active the whole path (level 1, level 2, level 3). If I click on a selection on level 2 to remain active up to level 2.
I have the following:
$(document).ready(function(){
$('.sf-menu li a').each(function(index) {
if((this.pathname.trim() == window.location.pathname))
$(this).parent().addClass("selected");
var next_li = $(this).parent().next();
$('a', next_li).addClass("selected2");
});
});

I think I got it this time, It's a bit dirty but It works.
First add classes so you can identify first, second and third level <li> elements. Do it in the foreach, or whatever bucle that makes the menu (or by hand if there's no such bucle):
<ul id="navlist" >
<li id="home" class="firstLevel">
<a class="nav" href="home">Home</a>
<ul class="secondLevel">
<li class="secondLevel">
<a class="nav2" href="home">sub-Home1</a>
<ul>
<li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
<li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
</ul>
</li>
<li><a class="nav2" href="home">sub-Home2</a></li>
</ul>
</li>
<li id="about" class="firstLevel">
<a class="nav" href="about-us">About Us</a>
</li>
</ul>
Then use jQuery closest. It traverses up the DOM tree and matches the closest item, you can pass a selector (the firstLevel or secondLevel classes we just created):
$('#navlist a').on('click', function (e) {
e.preventDefault(); //prevent the link from being followed
$('#navlist a').removeClass('selected');
$('#navlist a').removeClass('selected2');
$(this).closest('.secondLevel').children('a').addClass('selected2');
$(this).closest('.firstLevel').children('a').addClass('selected2');
$(this).addClass('selected');
});
Then you add !important to the selected class (so when there's a colision like in the About Us link selected is the class that is applied). This is the dirtiest part.
Check a working fiddle: https://jsfiddle.net/4r5vg/661/

Prevent ToggleClass on multiple elements

I have some li which i want when i hover on each of them toggle the class just for each oft hem not all.
Right now when i hover on each li all the LI will get the toggled class.
Here is the HTML and jQuery
<li><a class="one" href="#">
<img src="http://hhhhold.com/s"/></a>
<div id="project-title" class="me">Fandango
<span id="project-more">Learn more</span>
</div>
</li>
$('.one').hover(function() {
$('.me').closest('span').removeClass("dblock");
$('.me').closest('span').toggleClass('dblock');
});

Use $(this) to reference the active DOM element:
$('.one').hover(function() {
$(this).next('#project-title').find('span').removeClass('dblock');
// etc...
});
IDs should be unique in HTML too... Are you repeating the #project-title ID? If so it should be a class.

Delete link text with jQuery

I'm working with WordPress and 2 different plugins (Icons per post & pages and Multi-Level navigation). With the first plugin I selected a Icon per a page and with the second I built a dropdown menu.
The thing is that I want to show only the page Icon but the plugin remains writing the page title. I want to delete it with jQuery.
This is the generated HTML for the menu:
<ul class="children" style="display: none; visibility: hidden; ">
<li class="page_item page-item-514">
<a href="http://www.pausoberriak.net/lan-emailea/onurak/?lang=eu">
<img src="http://www.pausoberriak.net/wp-content/uploads/icons/beneficios.png" class="page_icon" alt="Onurak">Onurak</a>
</li>
<li class="page_item page-item-179">
<a href="http://www.pausoberriak.net/lan-emailea/lan-emailea-formulak/?lang=eu">
<img src="http://www.pausoberriak.net/wp-content/uploads/icons/formulas.png" class="page_icon" alt="Formulak">Formulak</a>
<ul class="children" style="display: none; visibility: hidden; ">
<li class="page_item page-item-183">
Praktikak enpresetan
</li>
<li class="page_item page-item-186">
Zerbitzu Okupazionala
</li>
<li class="page_item page-item-195">
Kontratazioa
</li>
</ul>
</li>
</ul>
I used this code to delete the text, in that case it should delete "Onurak", "Formulak", "Praktikak enpresetan", "Zerbitzu okupazionala" and "kontratazioa" :
<script type="text/javascript">
jQuery('#suckerfishnav li li a').text("");
</script>
It works, but it also deletes the img tag and children ul. I only want to remove the link text and have the other stuff remain.
Thanks in advance

First, block level elements are not valid inside a elements, i.e. you cannot put the ul element inside a.
You can iterate over all children and only remove text nodes:
jQuery('#suckerfishnav li li a').contents().each(function() {
if(this.nodeType === 3) {
this.parentNode.removeChild(this);
}
});
or
jQuery('#suckerfishnav li li a').contents().filter(function() {
return this.nodeType === 3;
}).remove()
Reference: .contents, Node

I'd start by trying to use jQuery's child selector instead of the "#suckerfishnav li li a" that you've used.
Something like jQuery('#suckerfishnav > li > li > a') might help.
http://api.jquery.com/child-selector/