無法獲取的jQuery腳本工作

林尋找一個jQuery腳本應該工作，我有tested it here.無法獲取的jQuery腳本工作

但我不能讓它在瀏覽器中運行：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>

來源

2016-02-13 user2909180

您有加入'.js'文件？ – Hemal

負載JQuery的文件
JS代碼找不到任何元素，因爲JS代碼將其他元素加載之前執行。

所以請寫：

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

比JS代碼可以找到它被裝載之後被定義的所有元素。

來源

2016-02-13 05:32:52

好像你還沒有包括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>

來源

2016-02-13 05:57:12

無法獲取的jQuery腳本工作

回答

相關問題