Develop Reference

combine change active li and reload part of page javascript

I have two simple function on click in my page with js, first is to change css active in current li and the other is to reload content only .
change active li
$(".list li").on("click", function(){
$(".list li").removeClass('active');
$(this).addClass('active');
});
reload content only
$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function(){
var page = $(this).attr('href');
$('.content').load('Passtel/'+page);
return false;
});
the problem is, it just function reload content only works if there two are running, but I've tested each of function works as it is.
How can I make both of function works together?
this is my content structure
<!-- Menu -->
<div class="menu">
<ul class="list">
<li class="active">
<a href="dashboard">
<i class="material-icons">home</i>
<span>DASHBOARD</span>
</a>
</li>
<li>
<a href="check">
<i class="material-icons">text_fields</i>
<span>CHECK SITE</span>
</a>
</li>
<li>
<a href="datek">
<i class="material-icons">layers</i>
<span>DATA TEKNIS</span>
</a>
</li>
</ul>
</div>

You can accomplish that with only one function. Hope it helps!
jsbin.com
const ul = $(".list");
const list = ul.find('li');
ul.on("click", 'li a', function(e){
e.preventDefault();
list.removeClass('active');
$(this).parent().addClass('active');
var page = $(this).attr('href');
// replace this with your $('.content').load('Passtel/'+page);
$('.content').load('https://jgatjens.com/?' + page);
});

You can use something like this:
$(function () {
$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function () {
e.preventDefault();
$(".list li").removeClass('active');
$(this).parent().addClass('active'); //added parent() here
var page = $(this).attr('href');
$('.content').load('Passtel/' + page);
return false;
});
});
//$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function (e) {
e.preventDefault();
$(".list li").removeClass('active');
$(this).parent().addClass('active');
var page = $(this).attr('href');
//$('.content').load('Passtel/' + page);
return false;
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="menu">
<ul class="list">
<li class="active">
<a href="dashboard">
<i class="material-icons">home</i>
<span>DASHBOARD</span>
</a>
</li>
<li>
<a href="check">
<i class="material-icons">text_fields</i>
<span>CHECK SITE</span>
</a>
</li>
<li>
<a href="datek">
<i class="material-icons">layers</i>
<span>DATA TEKNIS</span>
</a>
</li>
</ul>
</div>

Trying to add active class to menu item

I've spent 2 hours trying to create an active menu with no success, so I figured I would ask for help. I have an html menu, some js & css...
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
$("#index li a").each(function() {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
$(this).addClass("active");
})
});
.active { font-weight:bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='index'>
<div class='container'>
<div class='top'>
<h1><a href='/' title='The Maths Project'>The Maths Project</a></h1>
</div>
<ul class='section active_section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span>
<ul>
<li id='exhibit_106' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_3'>
<li><span id='section_title_3' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_3'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='../against-the-odds/black-swans'>black swans</a>
</li>
<li id='exhibit_72' class='exhibit_title'><a href='../against-the-odds/in-here-it-is-yesterday'>in here it is yesterday </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
When the user is on a specific page, the "a" link which they have clicked should become bold. However, for whatever reason it's not working.
I would greatly appreciate any help,
Regards,
Jack

I am not clear with your question but do you want set active class to menu, so you try the below code
$('#navlist a').click(function(e) {
e.preventDefault(); //prevent the link from being followed
$('#navlist a').removeClass('selected');
$(this).addClass('selected');
});
.nav {
color: green;
}
.selected {
color: red;
}
.san ul li{
float:left;
margin-right: 25px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<div class="san">
<ul id="navlist">
<li><a class="nav" href="">Home</a></li>
<li><a class="nav" href="">About Us</a></li>
<li><a class="nav" href="">Services</a></li>
<li><a class="nav" href="">Contact</a></li>
</ul>
</div>

This line gets the page name:
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
you need to apply the same logic to each of your links to see if they match:
$("#index li a").each(function() {
var aurl = $(this).attr("href").substr($(this).attr("href")
.lastIndexOf("/")+1);
if (aurl == pgurl || aurl == '')
$(this).addClass("active");
})
Snippet below (tweaked to match as location.href won't match)
$(function() {
//var pgurl = window.location.href.substr(window.location.href
// .lastIndexOf("/") + 1);
var locationhref = "mysite.com/against-the-odds/introduction"
var pgurl = locationhref.substr(locationhref.lastIndexOf("/")+1);
$("#index li a").each(function() {
var aurl = $(this).attr("href").substr($(this).attr("href")
.lastIndexOf("/")+1);
//console.log(aurl)
if (aurl == pgurl || aurl == '')
$(this).addClass("active");
})
});
.active { font-weight:bold;color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='index'>
<div class='container'>
<div class='top'>
<h1><a href='/' title='The Maths Project'>The Maths Project</a></h1>
</div>
<ul class='section active_section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span>
<ul>
<li id='exhibit_106' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_3'>
<li><span id='section_title_3' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_3'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='../against-the-odds/black-swans'>black swans</a>
</li>
<li id='exhibit_72' class='exhibit_title'><a href='../against-the-odds/in-here-it-is-yesterday'>in here it is yesterday </a>
</li>
</ul>
</li>
</ul>
</div>
</div>

Try following and check if it works.
$(function() {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$("#index li a").each(function() {
var href = "";
if($(this).attr("href") != '')
href = $(this).attr("href").substr(($(this).attr("href").lastIndexOf("/")+1);
if (href == pgurl || href == '')
$(this).addClass("active");
})
});

Just traverse the whole links and when any link will clicked then change the font-weight:normal to all links and then apply the font-weight:bold to currently clicked link.
$().ready(function () {
$("ul>li").click(function () {
$("ul>li").css("font-weight", "normal");
$(this).css("font-weight", "bold");
});
});

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/

Convert dynamic DOM structure to JSON

How can convert below DOM to JSON array which will have many more leafs in thefuture . I have tried a lot but didn't got any solution. I found this but it is not possible in my case.
HTML Code
<ul id="org1">
<li>
Main
<ul data-self="1">
<li data-self="2" data-parent="1">A
<ul data-self="2">
<li data-self="5" data-parent="2">A1</li>
<li data-self="6" data-parent="2">A2</li>
<li data-self="7" data-parent="2">A3</li>
<li data-self="8" data-parent="2">A4</li>
<li data-self="9" data-parent="2">A5</li>
<li data-self="10" data-parent="2">A6</li>
</ul>
</li>
<li data-self="3" data-parent="1">B
<ul data-self="3">
<li data-self="11" data-parent="3">B1</li>
<li data-self="12" data-parent="3">B2</li>
<li data-self="13" data-parent="3">B3</li>
<li data-self="14" data-parent="3">B4</li>
</ul>
</li>
</ul>
</li>
</ul>
JSON Required is
{
1:{
2:{5,6,7,8,9,10},
3:{11,12,13,14}
}
}
Script
function recursive(dis)
{
$(this).find(' > ul ').each(function(){
params[$(this).attr('data-self')]=[];
var i=0;
$(this).find('li').each(function(){
if($(this).has('ul'))
{
params[$(this).attr('data-parent')][i++]=rec(this);
}else
{
params[$(this).attr('data-parent')][i++]=$(this).attr('data-self');
}
});
});
}
recursive('#org1');
console.log(params);

I would prefer something like the following. The 2 changes in the HTML you need to make are:
1) Add a class to your ul such as <ul data-self="2" class="nodes">. 2) Add a class to the wrapper ul such as <ul data-self="1" class="parent">.
var json = {};
$("#org1").find("ul.parent").each(function() {
var $this = $(this);
json[$this.data("self")] = {};
var $nodes = $this.find("ul.nodes");
$nodes.each(function() {
var children = $(this).find("li").map(function() {
return $(this).data("self")
}).get();
json[$this.data("self")][$(this).data("self")] = children;
});
});
alert (JSON.stringify(json));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="org1">
<li>
Main
<ul data-self="1" class="parent">
<li data-self="2" data-parent="1">A
<ul data-self="2" class="nodes">
<li data-self="5" data-parent="2">A1</li>
<li data-self="6" data-parent="2">A2</li>
<li data-self="7" data-parent="2">A3</li>
<li data-self="8" data-parent="2">A4</li>
<li data-self="9" data-parent="2">A5</li>
<li data-self="10" data-parent="2">A6</li>
</ul>
</li>
<li data-self="3" data-parent="1">B
<ul data-self="3" class="nodes">
<li data-self="11" data-parent="3">B1</li>
<li data-self="12" data-parent="3">B2</li>
<li data-self="13" data-parent="3">B3</li>
<li data-self="14" data-parent="3">B4</li>
</ul>
</li>
</ul>
</li>
</ul>

When User Open One DropDown Close Other DropDowns

I Want When User Click On One DropDown All Other open DropDown Get Closed . I looked for answer in google but that is not working for my dropdown i know it's simple but i am unable to this pls help me !!
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
And jquery i am using in this :
<script>
$(document).ready(function(){
$(".hh_main").on('click' , '.hh_sf' , function(event){
event.preventDefault();
if($(this).next().hasClass('hh_inner')) {
$(this).next().slideToggle();
}
});
});
</script>

Try this:
HTML:
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner expanded">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner expanded">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner expanded">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
JQuery:
<script>
$(document).ready(function () {
$(".hh_sf").next().addClass("collapsed").slideUp();
$(".hh_main").on('click', '.hh_sf', function (event) {
event.preventDefault();
var currentClass = $(this).next().prop('class');
if (currentClass == "hh_inner expanded") {
$(this).next().removeClass("expanded");
$(this).next().addClass("collapsed");
$(this).next().slideUp();
} else {
$(".expanded").slideUp().addClass("collapsed").removeClass("expanded");
$(this).next().removeClass("collapsed");
$(this).next().addClass("expanded");
$(this).next().slideDown();
}
});
});
</script>
JsFiddle

I opened dropmenu with show and hide and made event on li you can use different way
try this :
JQuery :
$(".hh_main_menu").click(
function(){
$(this).next(".hh_inner").toggle();
if($(this).siblings(".hh_main_menu").children(".hh_inner").css("display")=="block")
{
$(this).siblings(".hh_main_menu").children(".hh_inner").hide();
}
} );