如何使下拉jQuery工作

How to make dropdown jQuery work?

本文关键字：工作 jQuery 何使下      更新时间：2023-09-26

当我测试它时，我有这个下拉菜单在jsFiddle中工作，但是当我运行它到我的测试服务器时，它不像它应该的那样工作。

jsFiddle:http://jsfiddle.net/cyberjo50/39bu8/2/

HTML 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="toggle.js"></script>
</head>
<body>
<button>Select Destinations<img src="images/down-arrow.png" width="20" height="20" alt=""   style="vertical-align:middle; padding-top: 0px;"/></button> 
<nav id="menu">     
<a href="#">Philadelphia</a>
<a href="#">United States of America</a>
<a href="#">Philippines</a>
<a href="#">Long Destinations Names</a>
<a href="#">Some Destination</a>
<a href="#">Australia</a>
</nav>
</body>
</html>
Javascript 

img_arrow = '<img src="images/down-arrow.png" width="20" height="20"/>';
$(function ()
{
var $window = $(window),
    $nav = $('nav'),
    $button = $('button');
$button.on('click', function ()
{
    $nav.slideToggle();
});
$window.on('resize', function ()
{
    if ($window.width() > 320)
    {
        $nav.show();
    }
});
});
$('#menu a').click(function(e){
$('button').html($(this).html() + img_arrow);
e.preventDefault();
});
下面是我的测试页面:http://t4fresponsivelandingpage.businesscatalyst.com/test.html

不知道为什么它不工作在我的测试页。它的工作原理应该和日本的一样。从小提琴的代码正是我在我的测试链接中使用的。

在页面加载期间而不是之后运行点击处理程序。$(function(){})是$(document).ready()的简写。要修复点击问题，将click处理程序赋值移动到onDOMReady调用内部:

$(function (){
    var $window = $(window),
        $nav = $('nav'),
        $button = $('button');
    $button.on('click', function (){
        $nav.slideToggle();
    });
    $window.on('resize', function (){
        if ($window.width() > 320){
            $nav.show();
        }
    });
    $('#menu a').click(function(e){
        $('button').html($(this).html() + img_arrow);
        e.preventDefault();
    });
});
http://jsfiddle.net/39bu8/4/

相关文章：