One time event?

JavaScript
1

I use this simple function for a vertical accordion menu:


	$(document).ready(function () {
		$( ".menu dd" ).hide();
		$( ".menu a:not(.subitem)" ).click(function(e){
			$( ".menu dd:visible" ).slideUp( "slow" );
			$( this ).parent().next().slideDown( "slow" );
			return false;
		});
	});

And it is actually working fine exept for one small thing. When you click on a link that has a submenu it is executed right. But if by accident you click on the same link again the entire slideUp/slideDown event is executed again. I tried the one time event .one():


  $( ".menu a:not(.subitem)" ).one().click(function(e){

but that isn’t working. What should I do to make the event just occurs ones while the sub menu is open.

Thank you

2

Hi donboe,

Could you post a quick demo of the accordion?

3

It’s this one: [U]cantonamsterdam.nl/canton-menu.php[/U].

  • Click on “Voorgerechten”, and the submenu is rolling out.
  • Then click again on “Voorgerechten”, then the submenu is rolling in first, and back out immediately afterwards.

I think there has to be added a toggling if/else statement to see if the submenu is visible or not. If not visible > open submenu, else > close submenu.
How to do in jQuery … don’t know, but Pullo or some other will have the simple code for that, I guess. :slight_smile:

4

Hi Francky. That is the page I am referring to yes. I have no clue either how to adjust that. Probably Pullo indeed will :slight_smile:

5

Ha, with some Googlin’ I found jQuery has a simple built-in function to toggle a submenu with a roll-out / roll-in effect: slideToggle() ! :slight_smile:

If I apply this to your menu-menu, it can be something like this:

<script>
$( "#vooraf" ).click(function() {
	$( "#voorafSubs" ).slideToggle( "slow" );
});

$( "#hoofd" ).click(function() {
	$( "#hoofdSubs" ).slideToggle( "slow" );
});

$( "#menulijst" ).click(function() {
	$( "#menulijstSubs" ).slideToggle( "slow" );
});
</script>

Note: I should start with the complete Menu’s, and then the “losse Gerechten” (loose Dishes). Are there no “Desserts”? Or a “Drankenkaart” (Drinks menu), to be complete?

6

Hi,

Francky I think donboe needs the other menus to close when one opens (as usual with accordions).

This should work buy is a bit long winded.


$(document).ready(function () {
		$( ".menu dd" ).hide();
		$( ".menu a:not(.subitem)" ).click(function(e){
			var myTarget = $( this ).parent().next(); 
			var dontSlide = 0;
			if (myTarget.is(':visible')){dontSlide = 1}
			$( ".menu dd:visible" ).slideUp( "slow" );
			if (dontSlide == 0){
					myTarget.slideDown( "slow" );
					}
			return false;
		});
	});

Pullo will be able to tidy it up :slight_smile:

7

Hahahahaha. Thank you Paul. This is nearly what I am looking for! It just slide up again when clicking the parent again and not down again. But I am looking for away that it isn’t sliding at all when the parent is clicked again while the sub is open!

8

Hi there,

Sorry for the delayed response, I was tied up all day.

Anyways, I think this is what you’re after:

$(".menu dd").hide();
$(".menu dt").click(function(){
  var $menuItem = $(this),
      isAccordion = $menuItem.find(">:first-child").hasClass("accordeon"),
      accordionIsVisible = $menuItem.next().is(":visible")

  if(!(isAccordion && accordionIsVisible)){
    $(".menu dd:visible").slideUp("slow");
    $menuItem.next().slideDown("slow");
  }
});

Demo.

Hope I understood what you are trying to do correctly.

9

Then how will you close it? :slight_smile: I usually like to close the accordion once I’ve used it otherwise it takes up space on the page.

10

By clicking on another item, or never. :wink:
But I agree: it’s more userfriendly to close a thing with the same link as with which you opened it.

11

Hi Pullo. That is indeed what I was looking for. It all seems so simple when you see it. I was struggling for hours. Thanks to Paul I was a step nearer and now It is like I would like to. So thanks again. Also thanks to Paul and Francky

12

No probs :slight_smile:

Bear in mind what Paul said with the default accordion behaviour, however.
I often do the same thing (i.e. shut it, to stop it taking up space, especially if viewing on a small screen).
Would it really hurt to offer this to your users?

13

Hi Pullo. I agree with both you and Paul, but this is how the client wants it, and Customer is King :slight_smile: