We Keep Coding

javascript horizontal menu click to open

Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:
JavaScript:
$(document).ready(function() {
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>

Before I start my answer, let me explain jQuery a bit.
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
This broken down:
$(".menu-button,.menu-button1").click(function() { -> When any item with class menu-button OR class menu-button1 is clicked
$(".menu-bar").toggleClass("open"); ->Toggle the "open" class for all elements in your page with class menu-bar.
Since you call all the menus instead of the specific one you want, it opens both of them.
So, be more specific by - for starters - using IDs, or unique/identifying classes:
JS:
$(document).ready(function() {
$(".menu-button.home").click(function() {
$(".menu-bar.home").toggleClass("open");
});
$(".menu-button.pencil").click(function() {
$(".menu-bar.pencil").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar home">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar pencil">
<li>Menu1</li>
<li>About</li>
</ul>

I agree with M.Doye's comment about using .each (but sorry, I can't answer directly).
I want to add that, it will be much easier with that kind of HTML structure I think:
<ul class="menu">
<li title="home">
Show Menu 1
<ul class="menu-bar">
<li>Menu1
</li>
</ul>
</li>
<li title="pencil">
Show Menu 2
<ul class="menu-bar">
<li>Menu2
</li>
</ul>
</li>
</ul>
The, click on the link and use .next() or .siblings or closest... to show the right ul.
But of course you'll have to rewrite you CSS :)

Here is updated code
$(document).ready(function () {
$(".menu-button,.menu-button1").click(function () {
$(this).siblings(".menu-bar").toggleClass("open");
})
})
<ul class="menu">
<li title="home">menu
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
</li>
<li title="pencil">pencil
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
</li>
</ul>
here is a jsfiddle

Trying to parse tag element

I am trying to parse a web page with JavaScript targeting list <li> without class.
<ul id="cartItems">
<li class="heading">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

Use querySelectorAll to get all li elements without a class.
var liWithoutClass = document.querySelectorAll('#cartItems > li:not([class])');
console.log(liWithoutClass);
document.write(liWithoutClass[0].textContent); // Output the first li
document.write('<br />' + liWithoutClass[3].textContent); // Output the last li
<ul id="cartItems">
<li class="heading">Heading</li>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>

var elems = document.querySelector(".heading");
console.log(elems);
//Now we strip the class out like this:
elems.setAttribute(class, "none");
//Now we display the updated values below
console.log(elems);
// This won't work in Stack's editor, so you'll have to validate it against the page you want.
//Now, just grab the entire element by id from the page as below:
var updatedContent = document.getElementById("cartItems");
console.log(updatedContent);
//Again, stack's editor is limited, but overall this should work fine on your page.
<ul id="cartItems">
<li class="heading">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>

Angular: ng-click and <li> items

I'm using the fabulous UI Bootstrap for Angular but am having difficulty getting an onclick event raised.
Here is the code:
<ul class="dropdown-menu" role="menu">
<li><a><img src='/Content/Images/dept_cargo.png'/> CARGO</a></li>
<li><a><img src='/Content/Images/dept_commercial.png'/> COMMJ</a></li>
<li><a><img src='/Content/Images/dept_executive.png'/> EXECJ</a></li>
<li><a><img src='/Content/Images/dept_travel.png'/> TVL</a></li>
</ul>
{{ currentDepartment }}
I've tried every combination: putting the ng-click="behaviour()" variously inside the li, the a and the img, but nothing seems to work.
What am I doing wrong?
(ideally I'd just like to change the value of a scope variable but I'm thinking calling a behaviour to do the work is better practice)
This question is not the same as suggested above. The other question is to do with scope, whereas I would be happy just to be able to execute an alert(); from one of my li's.

You must have an issue in the js code where you set up the controller but if you set it up right, your html should look like this:
<ul class="dropdown-menu" role="menu">
<li ng-click="behaviour()"><a><img src='/Content/Images/dept_cargo.png'/> CARGO</a>
</li>
<li ng-click="behaviour()"><a><img src='/Content/Images/dept_commercial.png'/> COMMJ</a>
</li>
<li ng-click="behaviour()"><a><img src='/Content/Images/dept_executive.png'/> EXECJ</a>
</li>
<li ng-click="behaviour()"><a><img src='/Content/Images/dept_travel.png'/> TVL</a>
</li>
</ul>
and in your js:
function myCtrl($scope) {
$scope.behaviour = function () {
alert('asd');
};
}
and here is a working sample: http://jsfiddle.net/97u2jp6d/1/

<ul class="dropdown-menu" role="menu">
<li><a ng-click="behaviour()"><img src='/Content/Images/dept_cargo.png'/> CARGO</a></li>
Make sure you have $scope.behaviour = function() {} defined inside of the controller for that code snippet.

You don't need more than this:
HTML
<ul>
<li ng-click="doSomething()">item 1</li>
<li ng-click="doSomething()">item 2</li>
<li ng-click="doSomething()">item 3</li>
<li ng-click="doSomething()">item 4</li>
<li ng-click="doSomething()">item 5</li>
</ul>
Controller
$scope.doSomething = function () {
console.log('doing something');
}
http://plnkr.co/edit/52C2daC9jugCOOaNBDvP

Replace href value by getting current URL

I have a menu in Wordpress that uses WP Menu system. All links are basically custom links that output the following (WP classes removed for brevity):
<ul>
<li>About
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</li>
</ul>
I'm trying to remove the domain part of the URL if the parent page is being viewed so if I were viewing the About page the links in the menu would change to:
<li>About
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</li>
</ul>
The problem I have with jQuery is that I cannot target each specific page because the pages will be unknown, I therefore need it to get the URL and match it with the correct part of the menu to change the links. I have tried this but its too specific:
if (window.location.href.indexOf("about") != -1) {
//do something
} else {
//do something else
}
EDIT
I only want to alter the links in the menu for the current page. The answers so far change all of the link in the menu, I just want to target the links found on the same page.

DEMO here
Firstly add a class sections to the ul element to make it easy to target.
<ul class="sections">
<li>Section 1
</li>
<li>Section 2
</li>
<li>Section 3
</li>
</ul>
Use .map() to replace the href for each anchor.
EDIT - based on your new update & I liked #Archer's update too. This should work.
$(".sections a[href* = '" + window.location.pathname + "/#']").map(function(){
var currentsection = this.href.split('/').pop();
this.href = currentsection;
});

Another option...
$(function() {
$("a[href*='" + window.location.pathname + "#']").attr("href", function() {
return "#" + this.href.split("#")[1];
});
});
This will find all the links with the current page and a # in them and fix the href value accordingly.

Try this,
$('a').each(function(){
// check the anchor tab href has location.href or not
if($(this).attr('href').indexOf(window.location.href) != -1)
{
// some code to replace location.href to blank
var href=$(this).attr('href').replace(window.location.href,'');
$(this).attr('href',href);
}
});
Alternatively, try this,
$('a').each(function(){
if(this.href.indexOf('#') != -1)
{
var href=this.href.split('#')[1];
this.href = '#'+href;
}
});

Nested lists - selecting path using Javascript

I have Javascript function that is adding css class "current" to selected link <a>. This function looks like that:
function markActiveLink() {
var path = location.pathname;
var links = null;
if (path) {
links = $("a[href^='" + path + "']");
} else {
links = $("a[href='/']");
}
links.parents("li").each(function () {
$(this).addClass("current");
});
}
And I have nested list wchich looks similar to that list:
<ul class="menu">
<li>menu item
<ul>
<li>menu item </li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul>
<li>menu item </li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
I want to add class "current" (using Javascript function) not to link <a> like it is now working but to <li> element and it's parent <li>. So it would look like that:
<ul class="menu">
<li class="current">menu item
<ul>
<li>menu item </li>
<li class="current">menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul>
<li>menu item </li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
Question: How can I modify my function markActiveLink() so that it would add class "current" both to <li> element and it's parent <li> element?
Any help here much appreciated!

Try:
links.parent().addClass('current')
.closest('li').addClass('current');
jQuery Docs

Seems to me like it's working. I only changed the hrefs in your links so they wouldn't be duplicates and added some CSS to show the highlighted elements in this JSFiddle

Use the .parent() api to do it
Docs
EDIT
Something like this:
$(this).parent().parent().addClass("current")