Develop Reference

How to click on a <li> <a/> </li> button in Javascript only?

I want to click on a button like this using Pure javascript:
<ul>
<li class="inactive-link">Schedule Appointment</li>
<li class="inactive-link">Schedule Appointment</li>
</ul>

Try
<ul>
<li class="inactive-link">Schedule Appointment</li>
<li class="inactive-link">Schedule Appointment</li>
</ul>
The question is pretty unclear regarding what you're trying to achieve but for the js part use
document.querySelector(".inactive-link a").addEventListener('click',()=>{
window.location="appointment?q=q8345lbf3r9tcmgMnfsad"
})
Adds the click event to the first li>a element (You can add it to all using forEach). This produces an equivalent result.

jQuery iterate nested html list

I have a HTML code of nested list giving me a hard time to read with jQuery!
I'm using
$.get();
to get the html then using
$(data).find(".thelist ul");
To get the list only which looks like
<ul>
<li>Draft Page
<ul>
<li>Batch Version 7</li>
</ul>
</li>
<li>info Control System
<ul>
<li>About info</li>
</ul>
<ul>
<li>Application
<ul>
<li>Functionality
<ul>
<li>
Access
</li>
</ul>
<ul>
<li>Login
</li>
</ul>
<ul>
<li>info Desktop
</li>
</ul>
<ul>
<li>Search
</li>
</ul>
<ul>
<li>info Mobile
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>Support</li>
</ul>
<ul>
<li>Technical Manual
<ul>
<li>Formatting
</li>
</ul>
<ul>
<li>Troubleshooting</li>
</ul>
</li>
</ul>
</li>
</ul>
The actual list is more than 200 item! and it can go up to 7 levels!
What im getting is every item that has children the text is including all of their text!.
I need to get the text and the link of each then append or generate my own list with same level but different html structure
Is this the best approach ?
I have tried iterating using $each()

try this it will give all titles with links.
$(function(){
var links = [];
$( "ul" ).find( "a" ).each(function(k,v){
links.push({ title : $(v).text(), link : $(v).attr('href'), level : $(v).parents('ul').length });
});
console.log(links);
});

Assuming the <ul> you've shown above is the one inside the .thelist block.
I think it'll be easier if you just use $(data).find(".thelist ul li") to get all the list items inside the <ul> element (and subelements).
Or, if you want to go down just one level, you can do $(data).find(".thelist ul>li").
And, you can use the following method to avoid selecting children nodes:
$("#foo")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
I got this removing children idea from here.
I hope this helps.

Responsive nav with jquery, dropdowns only open when hovered over, the dropdown arrow won't work

I'm creating a website for a project and i'm not allowed to use frameworks (so no bootstrap but jquery is allowed.), earlier i had a problem where the navigation bar when collapsed (screen width under 800px) has all the individual links expanded, rather than being in individual categories.
I've now fixed that but i've now got this problem where the menu's wont stay open / the arrows when clicked just take you to the subcategories heading. This makes the site unusable for mobiles essentially as no one will think to long click a tab to open each one.
I've uploaded this website to
here
The Html nav bar
<nav role="navigation" id="cssmenu">
<ul>
<li>Home</li>
<li class="has-sub">Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li class="last">Information & Communications</li>
</ul>
</li>
<li class="has-sub">Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li class="last">Library</li>
</ul>
</li>
<li class="has-sub active">Manchester & Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li class="last">Nightlife</li>
</ul>
</li>
<li class="has-sub">Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li class="last">Assistance</li>
</ul>
</li>
<li class="last">Contact</li>
</ul>
</nav>
The Jquery script
( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');
// Create responsive trigger
menuList.prepend('<li id="responsive-tab">Digi-Co</li>');
// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
listItems.slideToggle('fast');
listItems.addClass('collapsed');
});
});
} )( jQuery );
The css can also be found
here
Any help will be appreciated
Thank you.

Create a URL based on Selection in <ul> <li>

I am trying to build url based on a user selection from a multilevel list.
The user selects four options which in turn will create the url required for retrieval of a document.
Example:
<ul id="nav">
<li>Report name
<ul>
<li>Year
<ul>
<li>2010
<ul>
<li>Jan</li>
<li>Feb</li>
<li>March</li>
</ul>
</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
</li>
</ul>
</li>
<!-- etc. -->
</ul>
So I would select the Report Name > Year > Month and this would build a url which equals the path to the file.
e.g. http://www.example.com/Report1/2010/Jan
Does anyone perhaps have any ideas as to how this can be done.

Here is an example of $(this) being used to get the value of what was clicked. I'm using JQuery in this example.
Had to add an id to the year value. You don't HAVE to do it this way, you can use the jquery selectors to get the proper value. It is just a lot easier.
<ul id="nav">
<li>Report name
<ul>
<li>Year
<ul>
<li id='2010'>2010
<ul>
<li>Jan</li>
<li>Feb</li>
<li>March</li>
</ul>
</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
</li>
</ul>
</li>
<!-- etc. -->
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
The javascript looks like this:
$('#2010 li').click(function()
{
var year=$(this).parent().parent().attr('id');
var month=$(this).text();
console.log(month+' '+year);
//this will show you Jan and 2010 in the log. You can use this variable to append to a URL string.
});

Ok there are several options, I would suggest using javascript.
So, basically, you would check if an <li> was clicked and if it was, then add a certain value to string, the redirect the page using that built string. Here is an example of what I mean:
http://jsfiddle.net/35XDn/4/

How to add CSS dynamically to the Menu Items

I want to Highlight the Menu Dynamically in Html Pages using Js.
For Example
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES
<ul>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</div>
I given Like this. But its not working
<script>
$(document).ready(function() {
$("#cssmenu ul li").click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
});
For this i would like activate the Menu when it is Clicked Using Js. Please Help me.
Thanks in Advance.

I have a demo for you here: http://jsfiddle.net/ttaN2/4/
I have altered the HTML so that there are correct open and close tags:
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES</li>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</ul>
</div>
I believe this is what you intended. I am not sure what you intended to happen when you click on another sub menu though. I'll try to help you out if you can describe exactly what you intend to happen.