我使用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();
});
})
&#13;
@media (max-width: 960px) {
#menu ul { display: none; }
#menu select { display: inline-block; }
}
&#13;
<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 © 2016.</p></center>
</div>
</div>
</BODY>
</HTML>
&#13;
答案 0 :(得分:0)
删除html上的select标签
在document.ready
$(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();
});
})
&#13;
#menu select {display: none;}
@media (max-width: 960px) {#menu ul { display: none; } #menu select { display: inline-block; }}
&#13;
<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 © 2016.</p></center>
</div>
</div>
&#13;