JavaScript menu dropdown onClick does not work - javascript

I am trying to make the drop down menu toggle on click but the JavaScript does not work with this html and css, while it works in other projects. The drop down enabled on hover before but I deleted ...: hover {display: block;}
Rest of the code in CodePen --> http://codepen.io/anon/pen/bNbzjM
HTML
<li id="active">УСЛУГИ
<div id="block_menu">
<ul class="pod_nav1">
<li>SEO Pakalpojumi</li>
</ul>
<ul class="pod_nav2">
<li>SEO Pakalpojumi</li>
</ul>
<ul class="pod_nav3">
<li>SEO Pakalpojumi</li>
</ul>
<ul class="pod_nav4">
<li>SEO Pakalpojumi</li>
</ul>
</div>
</li>
JavaScript
$(document).ready(function () {
$("li").click(function () {
$('li > ul ').not($(this).children("ul").toggle()).hide();
});
});
CSS

may be this will help. don't forget to include jquery.js
$("li").on('click',function() {
$('li > ul ').not($(this).children("ul").toggle()).hide();
});

View Live jsFiddle
j- Query
$(document).ready(function () {
$("li").click(function () {
$(this).children().children().toggle();
});
});

issue is in javascript plz check below code
$(document).ready(function () {
$("li").click(function () { $(this).find('#dropmenu').children('ul').toggle('slow');
});
});

Related

jQuery How to add click to ul

I want to add class checked on li when users click it using jQuery. I have written the below code which works.
HTML
<ul>
<li class="row">Documents checked</li>
<li class="row">Documents Verified </li>
<li class="row">Forwarded to Logistics </li>
<li class="row">Received by Logistics</li>
</ul>
.checked {
background: green;
}
jQuery
$(function() {
$('li.row').on('click', function() {
$(this).addClass('checked');
});
});
This is working but I am told this is bad practice and asked to find better way to do this. I do the following but it is not working.
$(function() {
$('ul').on('click', function(li) {
$(li).addClass('checked');
});
});
$(function() {
$('ul').on('click', function(li) {
$(li).addClass('checked');
});
});
it's wrong because you cant select li by click on you ul
if you want to add class or delete class with click you can use (toggleClass) like this
$('li').find(.row).on('click', function() {
$(this).toggleClass('checked');
});
but if you want to just add class write like this
$('li').find(.row).on('click', function() {
$(this).addClass('checked');
});
use this Code for solution your problem
$(".row").click(function(){
$(this).toggleClass("change")
})
.change {
background-color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="row">Documents checked</li>
<li class="row">Documents Verified </li>
<li class="row">Forwarded to Logistics </li>
<li class="row">Received by Logistics</li>
</ul>

Disable `<a>` link inside <ul> issue

Basically I do have a block of HTML code for nested list as below:
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
Using this what I need to do is, I want to check li.level_1 has a <ul>, if so then I need to disable <a> link link which is directly inside li.level_1.
This is how I tried it in jquery, but its removing all a from the list.
if($('ul li').has('ul').length) {
$('ul li > a').removeAttr('href');
}
Can anybody tell me how to fix that issue?
You can check if li has ul and disable a like this.
$('.level_1:has(ul) > a').removeAttr('href')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
You could set an event listener like this:
Set an id to the top level ul element:
<ul id="top_level_ul">
jQuery
$(document).on('click', '#top_level_ul > li > a', function(e) {
e.preventDefault();
});
ALTERNATIVE (pointer-events)
You can also set pointer-events:none to prevent any interaction:
$('#top_level_ul > li > a').each(function() {
$(this.addClass('noPointer'));
});
CSS
.noPointer {
pointer-events: none;
}
You have to start your "search" for links from $('ul li')
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}
See following example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
<script>
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}
</script>
</body>
</html>
I hope it helps you. Bye.
Link
$(document).ready(function(){
$('.level_2').siblings('a').remove();
});
UPD
$(document).ready(function(){
$('.level_2').siblings('a').css('pointer-events','none');
});
or
$(document).ready(function(){
$('.level_2').siblings('a').attr('onclick','return false');
});

How to get all parents of <li> tag onclick of it?

I am designing dynatree so nodes are place in ul and li tags. the problem I am getting is I am not getting parents of clicked li element.
Here is my html code,
<ul class="bulk">
<li>gp1
<ul>
<li>gp2
<ul>
<li>gp3
<ul>
<li>c1
<li>c2
<li>c3
</ul>
<li>gp4
</ul>
</ul>
<li>gp5
<ul>
<li>gp6
<ul>
<li>gp7
<ul>
<li>c4
<ul>
<li>c5
<li>c6
</ul>
</ul>
<li>gp8
<li>gp9
</ul>
<li>gp10
</ul>
</ul>
Here is my jquery method
$('ul.bulk li').click(function(e)
{
//alert($(this).find("span.t").text());
alert(e.html());
});
Here is my fiddel http://jsfiddle.net/raghavendram040/ojnLrcjz/
The problem I am getting is if click on gp3 it alerts me 3 times, but I want if I click on gp3 it should alert its parents(gp1 and gp2). Here I place all li and ul dynamically except tag. How to achive this please help me in this
You can do something like
$(function () {
$('ul.bulk li').click(function (e) {
if($(e.target).is(this)){
$(this).parentsUntil('.bulk', 'li').each(function(){
alert(this.firstChild.nodeValue)
})
}
});
});
Demo: Fiddle

On-click drop-down nav menu

I am making a column list with some drop-down menus and I needed the Jquery for the drop-down to make it work.
I have found some Jquery for this but the problem is when you have two menus with ul and li, like this.
HTML:
<ul class="list-menu">
<li class="sort-menu">4</li>
<div class="sort-list-dropdown">
<ul class="sort-list">
<li>4</li>
</ul>
</div>
</ul>
When you duplicate this two times and then when you click the 4 on the class that says sort-menu, it will put up two menus containers and that class is sort-list-dropdown I have been playing with JS I got from somewhere and I'm getting confused about this issue.
JavaScript:
$("ul.list-menu > li").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$("ul.sort-list > li").hide();
$(this).attr('id', '0');
} else {
$("ul.sort-list > li").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$("ul.sort-list > li").mouseup(function () {
return false;
});
//Mouse click on my account link
$("ul.list-menu > li").mouseup(function () {
return false;
});
//Document Click
$(document).mouseup(function () {
$("ul.sort-list > li").hide();
$("ul.list-menu > li").attr('id', '');
});
I get some of the variables but I do not think it's the code. I think I need to input a new variable but I do not know what does it need for it.
If anybody knows how to accomplish this, then please reply back to me.
I have one answer for this problem. Please try this code below:
$(document).ready(function() {
$('.sort-list-dropdown').hide();
$('ul.list-menu li').click(function() {
$(this).next('.sort-list-dropdown').toggle();
});
});
In code 'click', you can change it to 'hover'.
Try something like this:
http://jsfiddle.net/SinisterSystems/bmwBr/5/
HTML:
<ul>
<li class="sec">Heading One</li>
<li><ul>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li class="sec">Heading Two</li>
<li><ul>
<li>Third</li>
<li>Third</li>
<li>Third</li>
</ul></li>
</ul></li>
<li class="sec">Heading One</li>
<li><ul>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
</ul></li>
</ul>
JS:
$(function(){
$('li.sec').on('click', function() {
$(this).next('li').slideToggle();
});
});
CSS:
ul li {
list-style:none;
}
.sec {
background:#efefef;
padding:25px;
font-size:24px;
}
Try something like this:
http://jsfiddle.net/SinisterSystems/bmwBr/5/

How to show slideToggle closed by default?

I am creating a menu with sub menu which opens sub-menu with slideToggle. By default it is shows the sub-menu, please tell me that how it will show only menu and not sub menu links by default.
<span>Natural Rubber Reclaim</span>
<ul>
<div id="product_tabs">
<li><a href='products.html'><span>Whole Tyre Reclaim</span></a></li>
<li><a href='inner_tube_reclaim.html'><span>Inner Tube Reclaim</span></a></li>
</div>
</ul>
<span><a href='synthatic_reclaim_rubber.html'>Synthatic Reclaim Rubber</a></span>
<a href='products_5.html'><span>Crumb Rubber</span></a>
Rubber Compounds
and this is the toggle code I am using
<script>
$(document).ready(function() {
$('.accordion:eq(0)> span').click(function() {
$(this).next().slideToggle('fast');
});
});
</script>
Try
$(document).ready(function () {
$('.accordion:eq(0) > span').click(function () {
$(this).next().slideToggle('fast');
});
$('.accordion:eq(0) > span').next().hide()
});
another solution will be is to simulate the click event
$(document).ready(function () {
$('.accordion:eq(0) > span').click(function () {
$(this).next().slideToggle('fast');
}).click();
});

Categories

Resources