I have following code and when I hover on Menu it has some dropdown submenus and I am not able to click on any of my submenu links:
HTML:
<li class="onesource-user">
<%=expert.firstname %> <%=expert.lastname %>(<%= expert.login %><%=session.getAttribute("multi_lobs")==null?"":" - "+view_name %>)
<ul>
<li>Profile</li>
<li>Favorites</li>
<li class="log-out">Log out</li>
</ul>
JS:
$('.onesource-user').on('click', function(e){
e.preventDefault();
$(this).toggleClass('open');
return false;
})
Screenshot:
screenshot
Because of you're using event on .onesource-user so it'll aply on all it children so ( e.preventDefault + return false ) .
this would help .
$('.onesource-user > a').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('open');
return false;
})
see the above snippet :
$('.onesource-user > a').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('open');
return false;
})
.onesource-user ul{
display:none;
}
.onesource-user.open ul{
display:block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li class="onesource-user">
Sample UserName
<ul>
<li>Profile</li>
<li>Favorites</li>
<li class="log-out">Log out</li>
</ul>
</li>
Related
I have a simple menu/accordion slider. I want to add the class="active" to the clicked link and slide down to show the UL. When another separate menu item is clicked then the active class should be removed from the previous element and added to the one just clicked. Also if the same is clicked when in active mode then the slider should slide up and remove the active class.
I've tried various configurations of the below but each time have problems getting the active class to be removed if the same is clicked to slide up. Any help is appreciated.
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
}
else {
$(this).addClass('active');
}
$(this).next('ul').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
});
Update - have created a quick JSFiddle that demonstrates the problem, apologies for not doing on opening question. You can see that if same item is clicked to toggle the state remains active.
Since you want to support toggling, you should not remove active class from current element so
$(document).ready(function(menuSlide) {
var $as = $('li.menu-item-has-children a').click(function() {
$(this).toggleClass('active').next('ul').slideToggle();
$(this).parent().siblings().children('ul').slideUp();
$(this).parent().siblings().children('.active').removeClass('active');
return false;
});
});
.menu-item-has-children ul {
display: none;
}
a.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
</ul>
We simply store the previous click div in a variable and then slide up that div on click :
var previousElement = 0;
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
previousElement = 0;
}else {
$(this).addClass('active');
if(previousElement != 0) {
$(previousElement).removeClass('active');
$(previousElement).slideUp();
}
previousElement = this;
}
});
Easiest way is,
$(document).ready(function(){
$('li.menu-item-has-children .content').slideUp();
$(document).on('click','li.menu-item-has-children a',function(e){
e.preventDefault();
$this = $(this);
$('li.menu-item-has-children a').removeClass('active');
$this.addClass('active');
$('li.menu-item-has-children a').parent().find('.content').slideUp();
$this.parent().find('.content').slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<ul>
<li class="menu-item-has-children">
A
<div class="content">
AAAA AAAA AAAA
</div>
</li>
<li class="menu-item-has-children">
B
<div class="content">
BBBB BBBB BBBB
</div>
</li>
<li class="menu-item-has-children">
C
<div class="content">
CCCC CCCC CCCC
</div>
</li>
</ul>
</html>
In below example, i've worked same link click twice, please let me know if you are requesting this thing or not,
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
console.log($(this).hasClass('active'));
if($(this).hasClass('active') == false)
{
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
}
else {
$(this).addClass('active');
}
$(this).next('ul').slideDown();
$(this).parent().siblings().children().next().slideUp();
}
return false;
});
});
I have the following scripts in my dropdown menu:
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
HTML
<div class="menu">
<span>
<ul id="nav">
<li>Produk Teknik <i class='icons icon-right-dir'></i>
<div class="subs">
<div class="wrp3">
<ul>
<li><h3>Manometer</h3>
<ul>
<li><a href='#'>tes</a>
<ul>
<li><a href='#' class='anak'>tes-1</a></li>
</ul>
</li>
<li><br /></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
I need to change that script so that when we click all place, the dropdown menu will automatically be closed. Thank you
You can see my project example http://www.tokobesi.co.id/beta/
I think this is what you meant mate..Try this.. :)
$(document).click(function(e){
if( $(e.target).closest(".menu").length > 0 ) {
return false;
}else{
$("#nav .selected").removeClass("selected");
}
});
i got some problem when i was addclass and removeclass using jquery on my menu the problem is the page can't be load...
this my html :
<div class="menu-gila-container">
<ul id="menu-gila" class="menu nav-menu">
<li class="current-menu-item">HOME</li>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MYSQL</li>
<li>GA TAU</li>
<li>GA TAU</li>
<li>DIARE</li>
<li>ASK ME</li>
<li>ABOUT</li>
</ul>
</div>
This my javascript :
<script>
$(document).ready(function() {
$("ul.nav-menu li").click(function(e) {
e.preventDefault();
//Remove the active class
$("ul.nav-menu li").removeClass("current-menu-item");
//Add the active tab to the selected tab
$(this).addClass("current-menu-item");
});
});
</script>
Please help me
Remove this line e.preventDefault(); it stops
OR
$(document).ready(function () {
$("ul.nav-menu li").click(function (e) {
e.preventDefault();
$("ul.nav-menu li").removeClass("current-menu-item"); //Remove the active class
$(this).addClass("current-menu-item"); //Add the active tab to the selected tab
window.location.href = $(this).attr('href')
});
});
Add Active Navigation Class Based on URL
Example
HTML
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
Script
$(function() {
$('ul.nav-menu li a[href^="/' + location.pathname.split("/")[1] + '"]').prev().addClass('active');
});
Try this:
$(document).ready(function() {
$("ul.nav-menu li").click(function(e) {
e.preventDefault();
$(this).siblings('li').removeClass('current-menu-item');
$(this).addClass('current-menu-item');
});
});
Demo here
From many days am trying this but there is no result please help me when i click on main menu sub menu should highlight in php.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#cssmenu a').each(function (index) {
console.log(this.href);
if (this.href.trim() == window.location) {
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active {
background: #4FA9E4;
color: #FFF;
display: block;
}
</style>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul>
<li class="has-parent">a
</li>
<li>b
</li>
</ul>
</li>
<li class="has-sub">Patners
<ul>
<li>c
</li>
<li>d
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
You should handle the click event or other events you are interested, and toggle class in the event handler.
$(document).ready(function () {
$('#cssmenu ul ul a').click(function (e) {
//e.preventDefault();
$(this).parents('li.has-sub').find('>a').toggleClass('active');
});
});
Check the jsFiddle example.
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/