DropDown菜单使用Jquery

时间:2012-04-02 11:58:49

标签: css html5 jquery-ui

我有这个问题,在上面的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>

1 个答案:

答案 0 :(得分:1)

您的代码中存在许多问题。我想我已经在这里解决了所有问题:http://jsfiddle.net/exuY9/

有几件事:

  1. 在JS的最后一点中,您在另一个事件处理程序中有一个事件处理程序。虽然这是合法的,但我怀疑它是你的意图;
  2. 您的代码可能实际上已经在工作,我认为它显示了您想要的菜单,但它也立即隐藏了它们。为什么?因为#dr1,#dr2的onclick处理程序允许点击继续通过页面进入HTML的onclick处理程序,这会立即再次快速取消show(),你认为根本没有发生任何事情;
  3. 我还将所有代码移到$(function(){...})中;阻止,只是因为我不确定你是否在head中插入了这个代码,在这种情况下,这些元素不会出现以附加处理程序。如果您的脚本附加在body的末尾,那么这就不那么重要了;
  4. 您可以为该类创建一个,而不是为同一个类的每个ID创建一个新的处理程序。您可以在修订后的代码中看到我几次完成这项工作;
  5. 而且,作为一种风格问题,在前端开发人员中习惯使用Javascript中的单引号和HTML中的双引号。这样可以省去很多麻烦,就好像你在两者中使用双引号一样,你最终都需要一直逃避这些事情。