为什么我的下拉菜单链接无效

Question

我已使用jQuery和CSS成功地将主菜单转换为小屏幕的下拉菜单，但链接不起作用！ 我尝试的所有方法均无效。 我从一个永恒的文件中引用了jQuery。 这是我的代码：

HTML档案：

 $(function(){ $("<select />").appendTo("#menu"); // Create default option "Go to..." $("<option />", { "selected": "selected", "value" : "", "text" : "Go to..." }).appendTo("#menu select"); // Populate dropdown with menu items $("#menu a").each(function() { var el = $(this); $("<option />", { "value" : el.attr("href"), "text" : el.text() }).appendTo("#menu select"); }); $("#menu select").change(function() { window.location = $(this).find("option:selected").val(); }); }) 

 @media (max-width: 960px) { #menu ul { display: none; } #menu select { display: inline-block; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel=stylesheet href="mystyle.css" type="text/css"> </head> <body> <div id="wrapper" > <header id="header1"><a href="index.htm"><img src="images/header.gif"></a></header> <div id="menu"> <ul> <li><a href="painting.htm" class="menu">Painting</a></li> <li><a href="animation.htm" class="menu">Animation</a></li> <li><a href="drawing.htm" class="menu">Drawing</a></li> <li><a href="books.htm" class="menu">Books</a></li> <li><a href="contact.htm" class="menu">Contact</a></li> </ul> <select> <option value="" selected="selected">Select</option> <option value="index.htm">Home</option> <option value="painting.htm">painting</option> <option value="animation.htm">Animation</option> <option value="drawing.htm">Drawing</option> <option value="books.htm">Books</option> <option value="contact.htm">Contact</option> </select> </div> <div id="content"> <h1>Books</h1> <div id="main_imgs"> <A href="pages/painting_00.htm"><IMG src="thumbnails/cover_painting.jpg"></a> <br> <A href="pages/painting_00.htm">Portrait</A> </div> <script src="jquery.js"></script> </div> <div id="foot"> <center><p>Copyright &copy 2016.</p></center> </div> </div> </BODY> </HTML> 

Answer 1

删除HTML上的选择标签

在document.ready上添加您的jquery函数

 $(document).ready(function(){ // Create the dropdown base $("<select />").appendTo("#menu"); // Create default option "Go to..." $("<option />", { "selected": "selected", "value" : "", "text" : "Go to..." }).appendTo("#menu select"); // Populate dropdown with menu items $("#menu a").each(function() { var el = $(this); $("<option />", { "value" : el.attr("href"), "text" : el.text() }).appendTo("#menu select"); }); $("#menu select").change(function() { window.location = $(this).find("option:selected").val(); }); }) 

  #menu select {display: none;} @media (max-width: 960px) {#menu ul { display: none; } #menu select { display: inline-block; }} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper" > <header id="header1"><a href="index.htm"><img src="images/header.gif"></a></header> <div id="menu"> <ul> <li><a href="painting.htm" class="menu">Painting</a></li> <li><a href="animation.htm" class="menu">Animation</a></li> <li><a href="drawing.htm" class="menu">Drawing</a></li> <li><a href="books.htm" class="menu">Books</a></li> <li><a href="contact.htm" class="menu">Contact</a></li> </ul> </div> <div id="content"> <h1>Books</h1> <div id="main_imgs"> <A href="pages/painting_00.htm"><IMG src="thumbnails/cover_painting.jpg"></a> <br> <A href="pages/painting_00.htm">Portrait</A> </div> <script src="jquery.js"></script> </div> <div id="foot"> <center><p>Copyright &copy 2016.</p></center> </div> </div>