CODEWITHSUNDEEP
jquerycss
shan
shan

Reputation: 3145

Issues with Jquery slidedown menu

I'm having an issue with my Jquery menu -- I can't seem to get it to do both (1) appear, and (2) slideDown at the same time, only one or the other!

I am using flexboxes in order to make my main menu and my submenu (the one I need to slidedown), and I think this may be causing the issue. Here's the Jquery I have so far:

$(document).ready(function () {
    $('#mainbutton').click(

    function () {
        $('.menu').css('display', '-webkit-flex');
        $('.menu').slideDown(100);
    },

    function () {
        $('.menu').slideUp(100);
    }

    );
});

I've been able to get it to change its display from none to -webkit-flex with no issues, it just won't slide down. Here's the rest of my relevant css/html: http://jsfiddle.net/p4Cgu/10/

Any ideas? I'm pretty new to Jquery so it's probably a noob mistake..

Thanks for any help you may provide! :-)

edit: fixed the jsfiddle so the mainbutton is there

edit2: i've managed to get it to slide down, now it's just a matter of getting it to stay open when I mouseover the menu items

Upvotes: 0

Views: 924

Answers (1)

Suryaprakash Pisay
Suryaprakash Pisay

Reputation: 648

I think two(2) call back function can't work on same event.

Only the 2nd function will be executed.

DO one thing put a call back function for slideUp or slideDown which ever you want first. Below is the modified code.

$(document).ready(function () {
    $('#mainbutton').click(

    function () {
        $('.menu').css('display', '-webkit-flex');
        $('.menu').slideUp(1000,function () {
        $('.menu').slideDown(1000);
    });
    });
});

Sample Example 

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
    $('.btn1').click(

    function () {
        $('p').css('display', '-webkit-flex');
        $('p').slideUp(1000,function () {
        $('p').slideDown(1000);
    });
    });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>

</body>
</html>

Put this code 

$('.menu').on('mouseover'function(){
$('.menu').show();
})
$('.menu').on('mouseout'function(){
$('.menu').hide;
})

Upvotes: 1

Related Questions