jquery slideDown only works once

Question

I am using jquery to make a slide down menu. The code works perfectly the first time the page loads. However, slideDown (the essential part of the click function) doesn't work more than once per menu item. Here is a js fiddle example http://jsfiddle.net/74ser/. Any help would be super appreciated.

$(document).ready(function() {
        $('.options').live('click',function() {
            console.log(this);
            var current = this.innerHTML;
            var list = listOfeverythingBut ("options", this);
            console.log(list);
            var stringA = new Array() ;
            var stringUl = new Array();
            for (var i =0; i < list.length; i++){
                var item ="."+list[i].innerHTML+"Menu";
                if ( $(item).length === 1){
                     stringA.push("ul"+ item ); 
                     stringUl.push(item + " a"); 
                }
            }
            stringA = stringA.toString();
            stringUl = stringUl.toString();
            console.log(stringA); 
            console.log(stringUl); 
            var currentItem = "." + current + "Menu";
            console.log(currentItem);
            if ( $(currentItem).length === 1){
                console.log("inOf"); 
                var toSlideDown = 'UL' + currentItem;
                console.log(toSlideDown); 
                console.log($(toSlideDown));
                $(toSlideDown).slideDown('medium');

            }
            else {
                $(".bottom").slideUp(20);
                $('.homeContent').delay(30).fadeIn(30);
            }           
            $(stringUl).slideUp('medium');
             moveDiv(this);
            $(stringA).removeClass('press');

            $('.options').removeClass('largeMenuStyle');
            $(this).addClass('largeMenuStyle');

            //setTimeout( function(){moveDiv(this)}, 2000); 
        });
});

note: the essential code is in the if ( $(currentItem).length === 1). I know that it enters the if because it console.logs 'inOf' each time I run the code. Even though it has the correct 'toSlideDown' variable it still doesn't work more than once.

I have already referred to these forum topics, but I haven't found my answer yet.

Jquery only works once per page load - want it work more than once without having to reload page

JQuery click event works only once

you are making it waaaay to difficult than it should be... I will take a look at it again — Chanckjh, Jan 10 '13 at 15:30
Just my slideDown code in general is more complex than necessary? — Caroline Record, Jan 10 '13 at 15:49

phnkha · Answer 1 · 2013-01-10T16:02:15.003

0

I'm sorry to say that but your code is very tricky and the HTML structure is very wrong.

Try my hot fix at: http://jsfiddle.net/jvLJs/1/

 $(toSlideDown + ' a').show();
 $(toSlideDown).hide().slideDown('medium');

edited Jan 10 '13 at 16:02

answered Jan 10 '13 at 15:12

phnkha

7,782
2
24
31

I tried it http://jsfiddle.net/jvLJs/ It makes the menu jerk a bit the second time, but it still isn't functional – Caroline Record Jan 10 '13 at 15:25
There's an error in console at the line $('.slideshow').cycle({. It seems cycle.js is missing – phnkha Jan 10 '13 at 15:35
Thank you for your response. Cycle.js is for controlling my image slide shows. I didn't include it on my jsfiddle example. But it is on my local copy and I still have the same issues in that local copy. I didn't think it was relavent. Was I wrong? – Caroline Record Jan 10 '13 at 15:47
Thank you so much for this fix. It works now. I am new at web programming and I am primarily self taught in html, css and jquery. although I have been trained in using javascript. So I am completely open to feedback. What do you mean that my html structure is wrong? – Caroline Record Jan 10 '13 at 16:16
Glad to help, consider to Accept the answer if it's helpful, and good luck! :) – phnkha Jan 10 '13 at 16:17
you use
– phnkha Jan 10 '13 at 16:19

score -1 · Answer 2 · answered Aug 09 '15 at 00:11

I think this should help although is an old question. I've been having the same problem and I search everywhere to find a solution thinking my problem was in my jQuery file. Then I took a look on my css and found the problem.... basically jQuery animations DON'T WORK if you have declared transition in your css object. That's it or at least that's what fixed my problem.

jquery slideDown only works once

2 Answers2