I managed to do everything right, open each element. As you can see in the example below all the icons change together, but as it does to replace only what was clicked?
$('.list-prod > li > span').on('click', function() {
$(this).next().slideToggle('slow', function() {
if($(this).is(':visible')) {
$('.list-prod > li > span').addClass('collapse');
} else {
$('.list-prod > li > span').removeClass('collapse');
}
});
});
External link demo
JSFIDDLE DEMO
$('.list-prod > li > span').on('click', function () {
$(this).toggleClass('expand collapse');
$(this).next().slideToggle('slow');
});
Here what you should write
$('.list-prod > li > span').on('click', function () {
$(this).next().slideToggle('slow', function () {
$(this).prev().toggleClass('collapse');
});
});
since this within the callback function refer to the collapsed / visible div
Related
I have few sub-tabs(nav-pills) under every main tab(nav-tabs). And i want to show them on hover over main tab while going back to the active main-tab after hover.
I have written jquery for hover but not sure how to go back to the previous active tab.Problem is that on mouse hover , the last hovered tab stays active.
My code is given below where
$('.nav-tabs > li > a').hover(function () {
//$($(this).attr('href')).show();
$(this).tab('show');
}, function () {
// debugger;
//if ($(this).hasClass('active')) { //if ($(this).parent('li').hasClass('active')) {
// $($(this).attr('href')).show();
//}
//else {
// $($(this).attr('href')).hide();
//}
});
You will need to use a class to recall your previous state when you are done hovering.
$('.nav-tabs > li > a').hover(function () {
$('.nav-tabs > li.active').addClass('lastActive');
$(this).tab('show');
}, function () {
$('.nav-tabs > li.lastActive').removeClass('lastActive').children('a').tab('show');
});
Also you will need to add a click event that removes your lastActive class.
$('.nav-tabs > li > a').click(function () {
$('.nav-tabs > li.lastActive').removeClass('lastActive');
$(this).tab('show');
});
Something like this :)
pop-up menu not working in a single click can any one help me to this?
Here is the link
enter link description here
Here is the image
Please help me open it on single click and hide on anywhere click in the body.
Here is the Code
$(function () {
$('.ui-323 ul.ui-nav > li').tooltip();
});
$(document).ready(function () {
$(".ui-323 ul.ui-nav > li > a.ui-bar").click(function (e) {
/*e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}*/
});
$(".ui-323 ul.ui-nav > li > a.ui-user").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
$(".ui-323 ul.ui-nav > li > a.ui-doctor").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
$(".ui-323 ul.ui-nav > li > a.ui-patient").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
$(".ui-323 ul.ui-nav > li > a.ui-settings").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
$(".ui-323 ul.ui-nav > li > a.ui-import").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
});
There is lot of unnecessary code in your JS. Also the references to the external sources were not correctly put up. Here is the updated JS :
$(document).ready(function () {
$(".ui-323 ul.ui-nav > li > a").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
//$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
});
Also remove the class clearfix from your HTML like this:
<div class="ui-323 active" style="position: fixed; width: 100%; z-index: 100;">
<!-- Your code -->
</div>
UPDATE:
Add the following JS code for closing the menu items on mouseleave:
$(".ui-323 ul.ui-nav > li > a").mouseleave(function (e) {
e.preventDefault();
$(this).parents(".ui-323").addClass("active");
});
I have updated the JSFiddle. Now the menu items are opening up in a single click and closing on mouseleave.
You've got a lot of unnecessary duplicate code in there. I'd simplify all those click functions down to one, then add the class "menuItem" to each link. I edited your fiddle:
http://jsfiddle.net/mckinleymedia/4yd7panj/3/
It wasn't working also because jsfiddle wasn't able to pull those files. I added the regular jQuery and disabled your tooltips to show how the thing works.
Here's the code:
$(document).ready(function () {
$(".ui-323 ul.ui-nav > li > a.menuItem").click(function (e) {
e.preventDefault();
$(this).parents(".ui-323").toggleClass("active");
});
});
You could make this simpler by making it toggleClass... Actually, yeah, there's no reason not to. Edited the answer.
I have written jquery code for highlighting menu onclick of each respective submenu. Now here what happening is
I have one same link in three of the sub-menu's, so when I click one of them, it is highlighting the last menu.
Here is my code:-
var str = location.href.toLowerCase();
$("#menu li a").each(function () {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.activelink").removeClass("activelink");
$(this).parent().addClass("activelink");
$(this).parents("#menu ul").parent().addClass("activelink");
}
});
$("li.activelink").parents().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
$("li.activelink").parents("#menu ul").parent().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
$("#menu li .para1 a").each(function () {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.activelink").removeClass("activelink");
$(this).parent().addClass("activelink");
$(this).parents().parent().addClass("activelink");
}
});
$("li.activelink").parents().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
Have a look here
Also see the HTML of the same in the Js fiddle
Please suggest something for the same
UPDATE: This was not the OP intended question. The code below will not solve the problem.
I had this problem numerous times. Try this CSS code:
#menu > li:hover { background-color: red; }
Replace the background color declaration with your own highlight.
I looked at some similar posts, but haven't found the solution I'm looking for. I am attempting to append div#dropdownmenu only once. However, it continues to occur as I hover over the div. Any help would be greatly appreciated.
$(function () {
if ($('div#dropmenu').length == 0) {
$('#site_nav > ul > a').live('mouseenter', function () {
$(this).append("<div></div>");
$('#site_nav > ul > li a div').attr('id', 'dropmenu');
$('div#dropmenu').html("<ul></ul>");
$('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
});
} else {
$('#site_nav > ul > li > a').append("");
}
});
You can remove the function handler after it's been executed. I gave the anonymous function a name for easier reference.
$(function () {
if ($('div#dropmenu').length == 0) {
$('#site_nav > ul > a').live('mouseenter', function f() {
$(this).append("<div></div>");
$('#site_nav > ul > li a div').attr('id', 'dropmenu');
$('div#dropmenu').html("<ul></ul>");
$('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
$(this).die('mouseenter', f);
});
} else {
$('#site_nav > ul > li > a').append("");
}
});
http://api.jquery.com/die/
You are checking $('div#dropmenu').length == 0) before you attach the event listener, after that, the listener is attached and will always execute. You can move the check inside the event listener.
$(function () {
$('#site_nav > ul > a').live('mouseenter', function () {
if ($('div#dropmenu').length == 0) {
$(this).append("<div></div>");
$('#site_nav > ul > li a div').attr('id', 'dropmenu');
$('div#dropmenu').html("<ul></ul>");
$('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
} else {
$('#site_nav > ul > li > a').append("");
}
});
});
You can also use the .one() jQuery method to ensure that the event handler is executed only once.
$(function () {
if ($('div#dropmenu').length == 0) {
$('#site_nav > ul > a').one('mouseenter', function () {
$(this).append("<div></div>");
$('#site_nav > ul > li a div').attr('id', 'dropmenu');
$('div#dropmenu').html("<ul></ul>");
$('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
});
} else {
$('#site_nav > ul > li > a').append("");
}
});
http://api.jquery.com/one/
I have an element on my page that is toggled on and off by clicking on a text link. I also need the element to hide when a user clicks ANYWHERE on the page outside of the element itself - this is my jQuery code - can someone please show me what modifications to make to do what I need?
$(function() {
$("#header-translate ul li").click(function() {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
});
});
Using jQuery's one function is perfect for this.
$(function() {
$("#header-translate ul li").click(function(e) {
e.preventDefault();
var $toClose = $("#header-translate li ul")
$toClose.slideToggle(500, function() {
if($toClose.is(':visible')) {
$('body').one('click', function(e) {
e.preventDefault();
$toClose.slideUp(500);
});
}
else {
$('body').unbind('click');
}
});
});
});
What this will do is assure that this click handler will only get executed once, and only when the element is shown.
I believe you need to add a click() handler to the $('body'), and also event.stopPropagation() to your element.
$(function() {
$("#header-translate ul li").click(function(e) { // don't forget that 'e'
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
e.stopPropagation(); // so this doesn't register as a body click
});
$("body").click(function(e) {
$("#header-translate").hide();
});
});
You'll want to check if
$(function()
{
var elToHideSelector = "#header-translate li ul";
$("body").click(function(e)
{
if ( ! $(e.target).is(elToHideSelector + ',' + elToHideSelector + ' *') )
{
$(elToHideSelector).hide();
}
});
});
I've used this code:
$(function() {
$("#header-translate ul li").click(function(e) {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
e.stopPropagation(); // so this doesn't register as a body click
});
$("body").click(function(e) {
if ($('#header-translate li ul').is(':visible')) { $("#header-translate li ul").hide("slide", { direction: "up" }, 500);}
});
});
Add a click handler to BODY tag that will slide the element up and add event.stopPropagation() to the element that opens the element in the first place so the click to open is not send to BODY.
You can add a listener to the document (since the event bubbles up, you can capture it in a parent element)
$(function() {
$("#header-translate ul li").click(function() {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
$(document).one('click', function(){
$("#header-translate li ul").hide();
});
});
});