Question

我正在查看应该有效的Jquery脚本，我有tested it here.

但我无法在浏览器中使用它： Chrome和IE

我需要什么才能让它发挥作用？

加载页面时会打开下拉菜单。

由于

// click and hold event listener
$(function() {
  var timeout_id = 0,
    hold_time = 1000,
    hold_menu = $('.hold_menu'),
    hold_trigger = $('.hold_trigger');

  hold_menu.hide();

  hold_trigger.mousedown(function() {
    timeout_id = setTimeout(menu_toggle, hold_time);
  }).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
  });

  function menu_toggle() {
    hold_menu.toggle();
  }

})

ul.hold_menu {
  list-style: none;
}
ul.hold_menu a,
div.hold_trigger {
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid #ccc;
  width: 300px;
}
ul.hold_menu a:link,
ul.hold_menu a:visited {
  color: black;
  text-decoration: none;
}
ul.hold_menu a:active,
ul.hold_menu a:hover {
  background: aqua;
  text-decoration: none;
}
div.hold_trigger {
  color: black;
  cursor: pointer;
}
div.hold_trigger:hover {
  background: #ccc;
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="hold_trigger">click and hold to toggle menu</div>
<ul class="hold_menu">
  <li><a target="_blank" href="http://facebook.com">Fbook</a>
  </li>
  <li><a target="_blank" href="http://twitter.com">Twitter</a>
  </li>
  <li><a target="_blank" href="http://yahoo.com">Yahoo</a>
  </li>
</ul>
<html>

Answer 1

加载JQuery文件
JS代码找不到任何Element，因为js代码将在其他元素加载之前执行。

所以请写：

$(document).ready (function () {
    //Your JS code here
});

比JS代码可以找到加载后定义的所有元素。

Answer 2

看来你还没有包括Jquery .. 检查我的代码

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>



    <style>

        ul.hold_menu {
            list-style: none;
        }

        ul.hold_menu a, div.hold_trigger  {
            display: inline-block;
            padding: 5px 15px;
            border: 1px solid #ccc;
            width: 300px;
        }

        ul.hold_menu a:link, ul.hold_menu a:visited {
            color: black;
            text-decoration: none;
        }

        ul.hold_menu a:active, ul.hold_menu a:hover {
            background: aqua;
            text-decoration: none;
        }

        div.hold_trigger {
            color: black;
            cursor: pointer;
        }

        div.hold_trigger:hover {
            background: #ccc;
        }

    </style>

    <div class="hold_trigger">click and hold to toggle menu</div>
    <ul class="hold_menu">
        <li><a target="_blank" href="http://facebook.com">Fbook</a></li>
        <li><a target="_blank" href="http://twitter.com">Twitter</a></li>
        <li><a target="_blank" href="http://yahoo.com">Yahoo</a></li>
    </ul>
<script>
    // click and hold event listener
    $(function() {
        var timeout_id = 0,
        hold_time = 1000,
        hold_menu = $('.hold_menu'),
        hold_trigger = $('.hold_trigger');

        hold_menu.hide();

        hold_trigger.mousedown(function() {
            timeout_id = setTimeout(menu_toggle, hold_time);
        }).bind('mouseup mouseleave', function() {
            clearTimeout(timeout_id);
        });

        function menu_toggle() {
            hold_menu.toggle();
        }

    })
</script>
</html>

无法让jQuery脚本工作

2 个答案: