DropDown菜单使用Jquery [英] DropDown Menu Using Jquery

问题描述

我得到这个问题，在上面的html我不能点击下拉菜单，我错了一些在哪里，我的下拉菜单在这段代码不工作可以任何一个，请让我知道我在哪里错了？


CSS：

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：

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>

推荐答案

您的代码中有很多问题。我认为我已在这里修正他们： http://jsfiddle.net/exuY9/

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

有几件事情：

1. 在JS的最后一个位置，在另一个事件处理程序内部。虽然这是合法的，但我怀疑你的意图;


2. 您的代码可能实际上在工作，我认为它是显示菜单，你想要的，但它也立即隐藏他们以及。为什么？因为＃dr1，＃dr2的onclick处理程序允许点击继续通过页面到HTML的onclick处理程序，它立即取消了show（）再次这么快，你以为没有发生任何事情;


3. 我也把你的所有代码放在$（function（）{...}）;块，只是因为我不确定你是否插入这个代码在你的头，在这种情况下，元素将不存在附加处理程序，到。如果您的脚本附加在 body 的末尾，那么这不是一个关注点;


4. 而不是创建一个新的处理程序对于同一个类的每个ID，你可以只为该类创建一个。你可以看到我在修改后的代码中做了几次;


5. 并且，作为一种风格，它已经变成了前端开发者的习惯，使用单JavaScript中的引号和HTML中的双引号。这将为你节省很多麻烦，就像你在双方都使用双引号一样，你最终需要一直逃避。

1. 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;
2. 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;
3. 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;
4. 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;
5. 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.

这篇关于DropDown菜单使用Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！