使用 Jquery 的下拉菜单

Question

我遇到了这个问题，在上面的 html 中我无法点击下拉菜单，我在某些地方出错了，我在这段代码中的下拉菜单不起作用，谁能告诉我哪里出错了？ 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>

Answer 1

您的代码中存在许多问题。我想我已经把它们都修好了：http://jsfiddle.net/exuY9/

有几点：

1. 在您的最后一点 JS 中，您在另一个事件处理程序内部有一个事件处理程序。虽然这是合法的，但我怀疑你的意图；
2. 您的代码实际上可能一直在工作，我认为它可以按照您的意愿显示菜单，但它也立即隐藏了它们。为什么？因为您的 #dr1、#dr2 的 onclick 处理程序允许点击继续通过页面到达 HTML 的 onclick 处理程序，它立即又如此快速地取消了 show()，您认为根本没有发生任何事情；
3. 我还将您的所有代码移至 $(function(){...});块，只是因为我不确定你是否在你的head 中插入了这段代码，在这种情况下，元素不会出现以附加处理程序。如果您的脚本附在 body 的末尾，那么这将不那么令人担忧；
4. 无需为同一类的每个 ID 创建一个新的处理程序，您可以为该类创建一个。您可以在修改后的代码中多次看到我是如何做到这一点的；
5. 而且，作为一种风格，前端开发人员已经习惯使用 Javascript 中的单引号和 HTML 中的双引号。这将为您省去很多麻烦，因为如果您在两者中都使用双引号，您最终将需要一直转义。