DropDown Menu Using Jquery

Question

I got this issue, In the above html I cannot click on the dropdown menu, I went wrong some where ,my dropdown menu in this code is not working can any one please let me know where i went wrong? CSS:

Javascript:

     <script type="text/javascript">
$(function() {
    $('.menucontainer').hide();
    $('#container').sortable({
        handle:'h1',
        scroll: false,
        revert: true,
        tolerance: 'pointer'
    });


    $('.dropmenu').on('click', function(){
        var $ul = $('.menucontainer', this);            
        $ul.show(500);
        console.log( $ul );
        return false;
    });

    $('html').on('click', function() {
        $('.menucontainer').hide(500);
    });

});
</script>

try it on jsfiddle.net/bvVEb see if it works if not please provide information about what should be different — Bogdan Emil Mariesan
– Bogdan Emil Mariesan, Commented Apr 2, 2012 at 13:18
Hi, When we click on image a drop down menu must be visible, when i click anywhere in page it need to be disappear,i tried solving it , but in my page it is not working — Navyah
– Navyah, Commented Apr 2, 2012 at 13:20
Define "not working", please. Describe what is wrong. Looks ok to me: jsfiddle.net/Exceeder/ZBUP6 — Alex Pakka
– Alex Pakka, Commented Apr 2, 2012 at 13:28
The same code in Fiddle i can see DropDown Menu when i click, but when i copy the same code in my page drag and drop is working fine in this, but when i click a drop down menu i cant able to see dropdown menu, i am using jquert plugins jquery-1.3.2.min.js and jquery-ui-1.7.1.custom.min.js, please can any let me know where i went wrong i am very new face for jquery, struggling for this functionality from past week — Navyah
– Navyah, Commented Apr 2, 2012 at 13:35

mkoistinen · Accepted Answer · 2012-04-02 13:18:39Z

1

You had a number of issues in your code. I think I've fixed them all here: http://jsfiddle.net/exuY9/

A couple of things:

In your last bit of JS, you have an event handler inside of another event handler. While this is legal, I doubt it what you intended;
Your code may have actually been working in that I think it was showing the menus as you wanted, but it was also immediately hiding them as well. Why? Because your onclick handler for the #dr1, #dr2 were allowing the click to continue through the page onto the HTML's onclick handler, which immediately undid the show() again so fast, you thought nothing was happening at all;
I've also moved all of your code to inside the $(function(){...}); block, only because I wasn't sure of you were inserting this code in your head, in which case, the elements wouldn't be present to attach handlers, to. If your script was attached at the end of the body then this would be less of a concern;
Instead of creating a new handler for each ID of the same class, you can just make one for the class. You can see how I've done this a couple of times in the revised code;
And, as a matter of style, it has become customary amongst front-end devs, to use single quotes in Javascript and double-quotes in HTML. This will save you a lot of headaches as if you use double quotes in both, you'll end up needing to escape stuff all the time.

answered Apr 2, 2012 at 13:18

mkoistinen

7,7943 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Navyah Over a year ago

Hi mkoistine, I want the same functionality what u have given in fiddle, but it is not working in my web page

Navyah Over a year ago

I am Using the above plugins <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js">

mkoistinen Over a year ago

Ah, well, you'll need to either update your jQuery (yours is quite old) or you'll need to convert the event handlers back to the older, click style. Try this: jsfiddle.net/exuY9/1. Also, you probably have a 'click' handler on your .draggables that is eating up your clicks. Hard to say with what you've posted here.

mkoistinen Over a year ago

I would just like to say that you're making your life a bit difficult by having these "menus" inside a draggable. This isn't impossible to make work by any stretch, but it will require a deeper understanding of events than you have shown here so far. I've always found this to be a good starting point: quirksmode.org/js/events_order.html

Navyah Over a year ago

Thank you mkoistinen, i will go through the above link for a good starting in events

Collectives™ on Stack Overflow

DropDown Menu Using Jquery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related