I can't make my accordion close. It opens on click, however when I click back it doesn't close.
Here is my code:
MYPRO.accordion = function () {
var $acpanel = $(".accordion > .accordion-content"),
$acsnav = $(".accordion > .accordion-title > a");
$acpanel.hide().first().slideUp("easeOutExpo");
// $acsnav.first().addClass("active");
$acsnav.on('click', function () {
var $this = $(this).parent().next(".accordion-content");
if ($this.addClass("active")){
$acsnav.removeClass("active");
$acpanel.first($this).slideDown();
$(this).parent().next().slideDown("easeOutExpo");
}
else
{
$acpanel.first($this).slideUp();
$(this).parent().next().slideUp("easeInExpo");
//$acsnav.removeClass('active').slideUp("easeInExpo");
}
return false;
}); }
Every time you click, $this.addClass("active") returns a jQuery object, so the if will allways evaluate as true, and slide down the tab, never reaching the else statements.
Try something like:
var $acpanel = $(".accordion > .accordion-content"),
$acsnav = $(".accordion > .accordion-title > a");
$acpanel.slideDown("easeOutExpo");
$acsnav.addClass("active");
$acsnav.on('click', function(e) {
if ($acsnav.hasClass("active")) {
$acsnav.removeClass("active");
$acpanel.show().slideUp("easeInExpo");
} else {
$acsnav.addClass("active")
$acpanel.hide().slideDown("easeOutExpo");
}
});
This way you'll first check if its active. If so, slide up and remove the active class. If not active, slide down and remove the active class.
Here is a JSFiddle.
Edit: Updated code and added JSDFiddle.
Related
I managed to remove the attribute element of a list item but I am struggling to do the following: When I click on a list item,it should add a class called important,otherwise, the class must not exist.
I tried this using jQuery:
$(document).ready(function (){
var origHref = $('ul#primary-menu > li.menu-item-has-children > a').attr('href');
//alert(origHref);
var clicks = 0;
$('ul#primary-menu > li.menu-item-has-children > a').removeAttr("href").data("origHref",origHref);
$('ul#primary-menu > li.menu-item-has-children').click(function(){
clicks++;
if(clicks === 1){
$('ul#primary-menu > li.menu-item-has-children').addClass('important');
}
else if(clicks > 1){
alert("you clicked twice");
}
});
});
Problem: When I inspect the element and click on the list for the first time,nothing happens.Only when I click for the second time that the class is added.
NOTE: I wanna do that for mobile devices only,so no need to worry about screens wider than 800 pixels.
Please help.
Do a if based on the class not a global variable, prevent the default click event :
$('ul#primary-menu > li.menu-item-has-children').click(function(e) {
if ($(window).width() < 800) {
if (!$(e.target).closest('ul').is('.sub-menu')) {
e.preventDefault();
if (!$(this).hasClass('important')) {
$(this).addClass('important')
//toggle the menu
} else {
//redirect if second click
window.location = $(this).find('a').attr('href');
}
}
}
});
I want that my Navigation is loaded without loading the page..all works. But the navigation element <li> nav </li>should get an class with another style..the "active". I tried this, but doesn't work, you cann see what happens at my page
Code:
$('#content').children('section').not('#home').hide();
$(".a").hasClass('navigation-element').parent().removeClass('active');
$(".a").click(function(e){
e.preventDefault();
if ($(this).hasClass('navigation-element')){
var $target = $('#' + $(this).attr('href')).stop(true, true);
var $secs = $('#content > section').not($target).stop(true, true).filter(':visible');
if ($secs.length) {
$secs.fadeOut(function () {
$target.fadeIn();
$(this).parent().addClass('active');
});
} else {
$target.fadeIn();
}
} else if ($(this).hasClass('hide')){
$(this).parent().fadeOut();
}
});
The Errors are in Line 2 and 12.
Line 2: hasClass returns a boolean value, you need to use class filters
Line 12: here this does not refer to the clicked li element, you need to use a closure variable refer to the clicked element
//initial setup
$('#content').children('section').not('#home').hide();
$('.active:has(a.anavigation-element)').removeClass('active');
$('.navigation-element[href="home"]').parent().addClass('active');
$('.navigation-element').click(function (e) {
var $this = $(this);
e.preventDefault();
var $target = $('#' + $(this).attr('href')).stop(true, true);
var $secs = $('#content > section').not($target).stop(true, true).filter(':visible');
if ($secs.length) {
//remove existing active from the prev element
$('.active:has(a.navigation-element)').removeClass('active');
$secs.fadeOut(function () {
$target.fadeIn();
$this.parent().addClass('active');
});
} else {
$target.fadeIn();
$this.parent().addClass('active');
}
});
I have a button that toggles a menu popup. I have can make the menu disappear if you click outside of the menu but now my button toggle does not work. If I click the button again the menu stays up. How can I make the menu disappear if you toggle the button or if you click off the container?
jsFiddle: http://jsfiddle.net/PPcfN/
$('.quicklinks-rollover').click(function () {
$('.quicklinks').toggle();
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});
The mouseup function has to take care of the click on the button (quicklinks-rollover).
If fixed the whole thing here:
http://jsfiddle.net/8VUnq/1/
$(document).mouseup(function (e) {
var popup = $('#quickLinksPopup'),
button = $('#quickLinksToggle');
if (popup.is(':visible')
&& !popup.is(e.target)
&& !button.is(e.target)
&& popup.has(e.target).length === 0
&& button.has(e.target).length === 0) {
popup.toggle();
}
});
Keep in mind those two things:
Use IDs to refer to the items quicker and prevent multiple popup conflicts
Using a mouse event on the whole page is not recommended as the event will get triggered very frequently, try using an alternative method such as adding a close button in the popup, or to be more effective, think about adding the mouseup listener on the show of the popup and removing it on the hide.
You can determine the state of the popup with: $(popup).is(':visible') or is(':hidden').
Try :
var $quicklinks = $('.quicklinks');
var msOverLinks = false;
$('.quicklinks-rollover').click(function () {
$quicklinks.toggle();
});
$quicklinks.mouseenter(function() {
msOverLinks = true;
}).mouseleave(function() {
msOverLinks = false;
});
$(document).mouseup(function (e) {
if( ! msOverLinks ) {
$quicklinks.toggle();
}
});
You can do this Normal hide and show method. Because mostly toggle() function wont works in proper manner...
put your HTML button with attribute p="closed" by default:
<button class="quicklinks-rollover" p="closed" title="Quick Links">toggle</button>
Change Your Jquery:
$('.quicklinks-rollover').click(function () {
var a = $(this).attr("p");
var container = $(".quicklinks");
if(a=="closed"){
container.show();
$(this).attr("p","open");
}else{
container.hide();
$(this).attr("p","closed");
}
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});
The reason for this behavior, the mouseup() is binded when I perform the click() on the div. You can check this behavior by adding console.log message in .mouseup event.
So instead try like below.
$('.quicklinks-rollover').on('click', function (e) {
$('.quicklinks').toggle();
e.stopImmediatePropagation();
});
$(document).click(function (e) {
var container = $(".quicklinks");
console.log(container.has(e.target).length);
if (container.has(e.target).length === 0) {
container.hide();
}
});
Working Fiddle
I'm working off some code for a drop-down menu I found here on stack overflow: http://jsfiddle.net/jhoffm34/VbtuC/
I have a jquery drop-down menu that expands on click. I am trying to use document.onmousedown to get the menu to close when I click on "Categories" for a second time, but it is just reopening the menu right away. Does anyone know how to fix this?
Working demos
http://jsfiddle.net/RguMu/show
http://jsfiddle.net/RguMu/
http://jsfiddle.net/UK9Qt/ - only when category is clicked show and hide
So on second click, your menu will be closed now:
use is(':visible')
Another suggestion, you don't need so many properties. Just do show and hide, rest you know your requirement better.
jQuery code
if(submenu.is(':visible')){
submenu.hide();
return false;
}
Full code
var timeout = 999999;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open(event) {
jsddm_canceltimer();
jsddm_close();
var submenu = $(this).find('ul');
if(submenu.is(':visible')){
submenu.hide();
return false;
}
if (submenu) {
ddmenuitem = submenu.css('visibility', 'visible');
ddmenuitem = submenu.css('position', 'relative');
submenu.show();
return false;
}
return true;
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('visibility', 'hidden');
if (ddmenuitem) ddmenuitem.css('position', 'fixed');
}
function jsddm_timer() {
closetimer = window.setTimeout(jsddm_close, timeout);
}
function jsddm_canceltimer() {
if (closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
}
$(document).ready(function() {
$('#jsddm li').bind('click', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);
$('#jsddm > li').bind('mouseover', jsddm_canceltimer);
$('#jsddm li').find('ul').hide();
});
document.onmousedown = jsddm_close;
Ok so i have a javascript drop down menu. The drop down menu works fine but when i click one of the drop down links the link does not work. I think it has something to do with my "return false/true" set up.
Javascript:
function ddMenu_open(event)
{
ddMenu_close();
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
return false;
}
return true;
}
function ddMenu_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); }
function ddMenu_timer()
{ closetimer = window.setTimeout(ddMenu_close, timeout); }
function ddMenu_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#ddMenu > li').bind('click', ddMenu_open);
$('#ddMenu li ul').bind('click', ddMenu_timer);
});
document.onclick = ddMenu_timer;
}
</script>
So when i remove the "return false" statement my links work but then my drop down menu doesn't stay open. When i remove the return false statement, the drop down menu will open real quick and then shut (barely giving the user time to click an item). What do i need to change in this code so that when i click on the drop down it stays open and then when one of the drop down items/links are click the link actually works.
Again, right now the drop down functionality works fine (when it is click it stays open until there is another click) but when i click on the drop down item the link does not work, new page doesn't load. Thank you for your help.
thanks for the responses but it's still not working for me. Here is my entire code:
<script type="text/javascript">
function ddMenu() {
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function ddMenu_open(e)
{
ddMenu_close();
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
}
}
function ddMenu_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); }
function ddMenu_timer()
{ closetimer = window.setTimeout(ddMenu_close, timeout); }
function ddMenu_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#ddMenu > li').bind('click', ddMenu_open);
$('#ddMenu li ul').bind('click', ddMenu_timer);
});
document.onclick = function(ev){
if(ev.target.nodeName !== 'ul') {
ddMenu_close();
}
};
}
</script>
again i want the drop down menues to close when the document is click except for when the menu itself is clicked. Thanks.
Instead of returning false you could try to just prevent the default behaviour of the pulldown menu like this:
function ddMenu_open(event)
{
ddMenu_close(e);
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
return false;
e.preventDefault();
}
return true;
}
Note: You don't need to declare an argument in ddMenu_open and you don't need to return true at the end of ddMenu_open. But I understand where you are coming from. This book by the way will get you up to speed: http://eloquentjavascript.net/