Develop Reference

Jquery show or hide children link if it is available

I have a question on Jquery. If I click on Link1, which does not have any ul.children and the class current_page_item will be added(not shown in this code as it will be added automatically by Wordpress), then ul.children in Link2 should be hidden.
If i click on Link 2, which will have both class page_item_has_children current_page_item, in this case ul.children should be shown. I have tried my code bellow, which is i know it is absolutely wrong. Please give me your advices. Many thanks.
if($(.navigation).hasClass(page_item_has_children)){
(.navigation .page_item_has_children .children).hide();
}else if( $(.navigation).hasClass(page_item_has_children) && $(.navigation).hasClass(current_page_item)){
(.navigation .page_item_has_children .children).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3</li>
<li class="page_item ">Link4</li>
</ul>
</li>
</ul>

This solution is a bit more towards your scenario (edited based on comment):
$(".navigation li").on("click", function() {
if ($(this).hasClass("page_item_has_children") && $(this).hasClass("current_page_item")) {
$(".navigation .children").show();
} else {
$(".navigation .children").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item links">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>

How about simply hiding all nested UL elements, then simply showing the children of the clicked one?
$(".navigation li").each(function() {
// When we first load, hide all nested menus.
$(this).children("ul").hide();
if (localStorage.menuNumber) {
$(".navigation li").eq(localStorage.menuNumber).children().show();
}
})
.on("click", function() {
// When any top-level ul is clicked, hide the
// nested menus then show the current one.
$(this).parent().children().find("ul").hide();
$(this).children().show();
// We also want to persist this selection,
// should the user refresh...
localStorage.menuNumber = $(this).index;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
Edited it so that when it initially loads, all nested uls are hidden. Hope this helps! And edited again, to store the clicked menu in local storage. Sadly, for security reasons, this won't work here. See it as a fiddle: https://jsfiddle.net/snowMonkey/fnuvvLwb/

HTML JS - sub menu is not working?

I'm trying to achieve this. But I could not succeed so far. My code is given below. What is wrong with it?
html:
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger" id="bt-icon icon-gplus" ><br><span>Menu
<ul >
<li style="text-align:center;"><span>DashBoard</span></li>
<li style="text-align:center;"><span>User </span></li>
<li style="text-align:center;"><span>Candidates</span></li>
<li style="text-align:center;"><span>Partylist</span></li>
<li style="text-align:center;"><span>Position</span></li>
<li style="text-align:center;"><span>Program</span></li>
<li style="text-align:center;"><span>Department</span></li>
<li style="text-align:center;"class="active"><span>School-Year</span></li>
<li style="text-align:center;"><span>Reports</span></li>
<li style="text-align:center;"><span>Logs</span>
<ul class="sub-menu" style="text-align:right">
<li>Submenu</li>
</ul></li>
</ul>
</nav>
Javascript:
<script type="text/javascript">
$('li a').click(
function() {
$(this).next().slideToggle();
})
</script>

Firstly correct your markup ,some tags are not properly closed.
Second, you need to use preventDefault() to disable the default action of the a tag.
Third,
$('li a').click(
function() {
$(this).next().slideToggle();
})
this code will toggle you menu only if next element is the menu itself.
so use this
$('li a').click(function(e) {
e.preventDefault();
$('a:contains(Submenu)').slideToggle();
});
https://jsfiddle.net/uc3hp4o5/

jQuery click on a inside of ul and get it's attribute

I need to register click on the element a in ul list and get id of the a.
$("#nativeLang > ul > li > a").click(function(){
alert($(this).attr("id"));
});
This code is not working.
I found another way:
$("#nativeLang > ul").on("click", "a", function(event){
alert($(this).attr("id"));
});
But here I cannot get id of the clicked element a.
HTML
<li class="dropdown" id="nativeLang">
<ul class="dropdown-menu">
<li>English</li>
</ul>
</li>

If you're dynamically inserting these <li> tags, then you need to use $(document).on(...);
$(document).on("click", "#nativeLang > ul > li > a", function( event ){
$('#Result').html( $(this).attr("id") );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown" id="nativeLang">
<ul class="dropdown-menu">
<li>English</li>
</ul>
</li>
<div id="Result" ></div>

HTML:
<li class="dropdown" id="nativeLang">
<ul class="dropdown-menu">
<li>English</li>
</ul>
</li>
JS:
$("#nativeLang > ul").on('click', 'a', function(){
alert(this.id);
});
CODEPEN DEMO

how to hide ul li with specific class on page load by default before toggle click function apply

I have toggle tree which responds on click i.e. show or hide UL>li. I want to hide all the UL --> li who has parent ul-li. To make it more obvious I have apply css background-color to red which I want to be hidden by when page loads but show when it click back.
https://jsfiddle.net/toxic_kz/vr84pd6u/
<div>
<ul class="treeview">
<li><a>System Administration</a></li>
<li>
<a>System Core</a>
<ul>
<li><a>f2</a></li>
<li>
<a>f3</a>
<ul>
<li><a>f4</a></li>
<li><a>f5</a></li>
<li><a>f6</a></li>
</ul>
</li>
<li>
<a>f7</a>
<ul>
<li>
<a>f8</a>
<ul>
<li>
<a>f10</a>
<ul>
<li><a>f11</a></li>
</ul>
</li>
</ul>
</li>
<li><a>f9</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>MyFunctionA</a>
<ul>
<li>
<a>f12</a>
<ul>
<li><a>f13</a></li>
<li><a>f14</a></li>
</ul>
</li>
<li><a>f16</a></li>
</ul>
</li>
<li><a>Course Management</a></li>
</ul>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$('.treeview li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
// $('.treeview li.parent>ul li').css('display', 'none');
$('.treeview li.parent>ul li').css('background-color', 'red');
$('.treeview li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
});
</script>

If I understood your question correctly, this is what you want:
$(".treeview").find('ul').hide()
Place this in your $(document).ready function and it'll hide the underlying unordered list upon page load.

nested list css problems

I am having trouble nesting a list in the following. The nested list isn't appearing on the page. I assume its something to do with my JS hiding it. Can anyone see what the problem may be - it's driving me mad!
<ul class="question">
<li>QUESTION goes here
<ul>
<li>ANSWER goes here>
</li>
</ul>
</li>
<li>QUESTION 2 goes here
<ul>
<li><a href="#">ANSWER 2 goes here>
<li>
<ul>
<li>nested list item 1</li>
<li>nested list item 2</li>
<li>nested list item 3</li>
</ul>
</li></a>
</li>
</ul>
</li>
</ul>
My JS:
<script>
$(document).ready(function () {
$('#question > li > a').click(function(){
if (!$(this).hasClass('active')){
$('#question li ul').slideUp();
$(this).next().slideToggle();
$('#question li a').removeClass('active');
$(this).addClass('active');
}
else{
$('#question li ul').slideUp();
$('#question li a').removeClass('active');
}
});
});
</script>

Here:
http://jsfiddle.net/eAJjs/
$('#question > li > a').click(function () {
if (!$(this).hasClass('active')) {
$('#question>li>ul').slideUp();
$(this).next().slideToggle();
$('#question>li>a').removeClass('active');
$(this).addClass('active');
} else {
$('#question>li>ul').slideUp();
$('#question>li>a').removeClass('active');
}
});
<ul id="question">
<li>QUESTION goes here
<ul>
<li>ANSWER goes here>
</li>
</ul>
</li>
<li>QUESTION 2 goes here
<ul>
<li><a href="#">ANSWER 2 goes here>
<li>
<ul>
<li>nested list item 1</li>
<li>nested list item 2</li>
<li>nested list item 3</li>
</ul>
</li></a>
</li>
</ul>
</li>
</ul>