css - 使用 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(){...}); block ，只是因为我不确定您是否将此代码插入到您的 head 中，在这种情况下，元素不会出现以附加处理程序。如果您的脚本附加在 body 的末尾，那么这就不是什么大问题了；
4. 不必为同一类的每个 ID 创建一个新的处理程序，您可以只为该类创建一个。您可以在修改后的代码中看到我是如何多次这样做的；
5. 而且，作为一种风格，前端开发人员习惯于在 Javascript 中使用单引号，在 HTML 中使用双引号。这将为您省去很多麻烦，因为如果您在两者中都使用双引号，您最终将需要一直转义内容。