Question

我是jquery的新手，但我正在努力学习。我正在使用一个下拉按钮，可以在jsfiddle中正常工作。但是，当我在我的rails 3应用程序中尝试它时，它将无法正常工作。（单击链接时没有任何内容掉落）。工作jsifiddle http://jsfiddle.net/rKaPN/32/

如果我删除行$(".menu").fixedMenu();并将其添加到html中，就可以了。除非我删除$(".menu").fixedMenu();行

，否则我不知道为什么它不起作用

不工作

(function ($) {
$.fn.fixedMenu = function () {
    return this.each(function () {
      var menu = $(this);
        $("html").click(function() {
        menu.find('.drop-down').removeClass('drop-down');
      });
      menu.find('ul li > a').bind('click',function (event) {
            event.stopPropagation();
        //check whether the particular link has a dropdown
        if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
          //hiding drop down menu when it is clicked again
          if ($(this).parent().hasClass('drop-down')) {
            $(this).parent().removeClass('drop-down');
          }
          else {
            //displaying the drop down menu
            $(this).parent().parent().find('.drop-down').removeClass('drop-down');
            $(this).parent().addClass('drop-down');
          }
        }
        else {
          //hiding the drop down menu when some other link is clicked
          $(this).parent().parent().find('.drop-down').removeClass('drop-down');

      }
      })
    });
  }
  $(".menu").fixedMenu();
  })(jQuery);

工作

HTML

<script>
        $('document').ready(function(){
            $('.menu').fixedMenu();
        });
        </script>

JS

(function ($) {
$.fn.fixedMenu = function () {
    return this.each(function () {
      var menu = $(this);
        $("html").click(function() {
        menu.find('.drop-down').removeClass('drop-down');
      });
      menu.find('ul li > a').bind('click',function (event) {
            event.stopPropagation();
        //check whether the particular link has a dropdown
        if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
          //hiding drop down menu when it is clicked again
          if ($(this).parent().hasClass('drop-down')) {
            $(this).parent().removeClass('drop-down');
          }
          else {
            //displaying the drop down menu
            $(this).parent().parent().find('.drop-down').removeClass('drop-down');
            $(this).parent().addClass('drop-down');
          }
        }
        else {
          //hiding the drop down menu when some other link is clicked
          $(this).parent().parent().find('.drop-down').removeClass('drop-down');

      }
      })
    });
  }
  })(jQuery);

Answer 1

该行：

$(".menu").fixedMenu();

在页面加载并且DOM完全就位之前，

无法执行。

因此，当你用$(document).ready()包围它时它会起作用，而当你在启动JS中直接执行它时它不起作用。当它在DOM准备好之前执行时，无法找到DOM对象$(".menu")，因此它什么都不做。

它适用于jsFiddle，因为所有代码都包含在onload处理程序中（根据jsFiddle左上角的设置）。

在我的rails 3应用程序中使用jQuery下拉错误但在它之外工作？

1 个答案: