jQuery UI菜单代码未呈现
jQuery UI menu code is not rendering
我使用的是jQuery UI,我在(head)部分添加了指向javascript文件(jquery ui.min
、jquery-ui.css
)的链接,但当我将jQuery应用于菜单(#shMenu
)时,它不会呈现。我做错了什么?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui.min.js"></script>
</head>
<style>
.highlight{background-color:yellow;
}
#wrapper {
width:500px;
margin:auto;
}
.ui-menu {
width:15em;
}
#cartDiv {
border-style:solid;
border-width:5px;
}
</style>
<body>
<div id = "wrapper">
<ul id = "shMenu">
<li><a href = "Javascript:void(0)">Super Heroes</a>
<ul>
<li><a href = "Javascript:void(0)">Hulk</a></li>
<li><a href = "Javascript:void(0)">Batman</a></li>
<li><a href = "Javascript:void(0)">Spider-Man</a></li>
</li><a href = "Javascript:void(0)">Thor</a></li>
</ul>
</li>
<li><a href = "Javascript:void(0)">Comic Books</a>
<ul>
<li><a href = "Javascript:void(0)">Hulk</a></li>
<li><a href = "Javascript:void(0)">Batman</a></li>
<li><a href = "Javascript:void(0)">Spider-Man</a></li>
<li><a href = "Javascript:void(0)">Thor</a></li>
</ul>
</li>
</ul><br/>
<div id = "accordion">
<h3>Batman</h3>
<div>
A young Bruce Wayne (Christian Bale) travels to the Far East,
where he's trained in the martial arts by Henri Ducard (Liam Neeson),
a member of the mysterious League of Shadows. When Ducard reveals the League's true purpose
-- the complete destruction of Gotham City -- Wayne returns to Gotham intent on cleaning up the city without resorting to murder.
With the help of Alfred (Michael Caine), his loyal butler, and Lucius Fox (Morgan Freeman),
a tech expert at Wayne Enterprises, Batman is born.
</div>
<h3>Thor</h3>
<div>
As the son of Odin (Anthony Hopkins), king of the Norse gods,
Thor (Chris Hemsworth) will soon inherit the throne of Asgard from his aging
father. However, on the day that he is to be crowned, Thor reacts with brutality when the gods' enemies,
the Frost Giants, enter the palace in violation of their treaty. As punishment, Odin banishes Thor to Earth. While Loki (Tom Hiddleston),
Thor's brother, plots mischief in Asgard,
Thor, now stripped of his powers, faces his greatest threat..
</div>
<h3>SpiderMan</h3>
<div>
"Spider-Man" centers on student Peter Parker (Tobey Maguire) who,
after being bitten by a genetically-altered spider, gains superhuman
strength and the spider-like ability to cling to any surface. He vows
to use his abilities to fight crime, coming to understand the words of his
beloved Uncle Ben:
"With great power comes great responsibility."
</div>
<div id = "shTabs">
<ul>
<li><a href = "#ironman">Ironman</a></li>
<li><a href = "#hulk">Hulk</a></li>
<li><a href = "#thor">thor</a></li>
<li><a href = "#spiderman">SpiderMan</a></li>
</ul>
</div>
<div id = "ironman">
A billionaire industrialist and genius inventor, Tony Stark (Robert Downey Jr.),
is conducting weapons tests overseas, but terrorists kidnap him to force him to build a devastating
weapon. Instead, he builds an armored suit and upends his captors. Returning to America,
Stark refines the suit and uses it to combat crime and terrorism.
</div>
<div id = "hulk">
Eric Bana ("Black Hawk Down") stars as scientist Bruce Banner,
whose inner demons transform him in the aftermath of a catastrophic experiment;
Jennifer Connelly portrays Betty Ross, whose scientific genius unwittingly helps unleash the Hulk;
Nick Nolte plays Banner's brilliant father, who passes on a tragic legacy to his son; and Sam Elliott
portrays the commander of a top-secret military research center.
</div>
<div id = "thor">
As the son of Odin (Anthony Hopkins), king of the Norse gods,
Thor (Chris Hemsworth) will soon inherit the throne of Asgard from his aging
father. However, on the day that he is to be crowned, Thor reacts with brutality when the gods' enemies,
the Frost Giants, enter the palace in violation of their treaty. As punishment, Odin banishes Thor to Earth. While Loki (Tom Hiddleston),
Thor's brother, plots mischief in Asgard,
Thor, now stripped of his powers, faces his greatest threat..
</div>
<div id = "spiderman">
"Spider-Man" centers on student Peter Parker (Tobey Maguire) who,
after being bitten by a genetically-altered spider, gains superhuman
strength and the spider-like ability to cling to any surface. He vows
to use his abilities to fight crime, coming to understand the words of his
beloved Uncle Ben:
"With great power comes great responsibility."
</div>
<div></br>
<div id = "customDialog" title = "custom Dialog">
<p>A random dialog box that contains important information</p>
</div>
<a href = "Javascript:void(0)" id = "openDialog" title = "Open Dialog Box">Open Dialog</a><br/><br/>
<script type = "text/javascript">
$('document').ready(function() {
$("#shMenu").menu({
position: {
my: "center top"
at: "center bottom"
};
});
});
</script>
</div>
</body>
</html>
JQuery代码中存在语法错误。代码应为:
$('document').ready(function() {
$("#shMenu").menu({
position: {
my: "center top",
at: "center bottom"
}
});
});
参见工作示例:https://jsfiddle.net/Twisty/3z80bLed/
相关文章:
- 谷歌应用程序脚本:如何在UI关闭后运行此代码
- 我可以从代码后面更改按钮单击上的Jquery ui活动选项卡吗
- jQuery UI菜单代码未呈现
- 如何在JS代码中设置WinJS.UI.Repeater控件的数据
- 温泉UI问题出现“白屏”角度JS代码
- 带有代码点火器的ui-router在刷新页面或使用html5mode(true)粘贴URL时给出404
- Ons导航(温泉UI),使用javascript代码
- 更改角度 UI 路由器 2.0.13 的代码
- 地铁 UI 代码不起作用
- Jquery UI使用表oracle在代码点火器中自动完成
- ServiceNow UI操作调用客户端和服务器代码
- Facebook JS API:任何对FB.ui的调用都返回错误代码:191
- jQuery UI在firefox中无法使用演示中的重复代码
- Sitecore 8 Speak UI-从HTMLTemplate链接调用页面代码Javascript
- 如何在prime ui或jquery数据表中包含HTML代码“;列”;选项's headerText
- 确保代码在对监视属性的更改在UI中生效后执行
- 什么是错误的这个自动完成代码(JQuery-UI自动完成)
- Jquery UI添加不必要的代码和破坏的东西
- 不能让Jquery UI正常工作.需要拆分代码
- 如何合并Jquery UI可排序代码