0
我尝试创建悬停多个可配置为JSON的下拉上下文菜单。JSON数据多下拉菜单
$(function() {
var data = {
\t \t menu: [{
\t \t \t name: 'Ukraine',
\t \t \t link: '0',
\t \t \t sub: null
\t \t }, {
\t \t \t name: 'Croatia',
\t \t \t link: '1',
\t \t \t sub: null
\t \t }, {
\t \t \t name: 'Denmark',
\t \t \t link: '2',
\t \t \t sub: null
\t \t }, {
\t \t \t name: 'Canada',
\t \t \t link: '3',
\t \t \t sub: null
\t \t }, {
\t \t \t name: 'Columbia',
\t \t \t link: '4',
\t \t \t sub: null
\t \t }, {
\t \t \t name: 'Japan',
\t \t \t link: '5',
\t \t \t sub: null
\t \t }, {
\t \t \t name: 'Wales',
\t \t \t link: '6',
\t \t \t sub: null
\t \t }, {
\t \t \t name: 'England',
\t \t \t link: '7',
\t \t \t sub: [{
\t \t \t \t name: 'Arsenal',
\t \t \t \t link: '0-0',
\t \t \t \t sub: null
\t \t \t }, {
\t \t \t \t name: 'Liverpool',
\t \t \t \t link: '0-1',
\t \t \t \t sub: null
\t \t \t }, {
\t \t \t \t name: 'Manchester United',
\t \t \t \t link: '0-2',
\t \t \t \t sub: null
\t \t \t }]
\t \t }, {
\t \t \t name: 'Spain',
\t \t \t link: '8',
\t \t \t sub: [{
\t \t \t \t name: 'Barcelona',
\t \t \t \t link: '2-0',
\t \t \t \t sub: null
\t \t \t }, {
\t \t \t \t name: 'Real Madrid',
\t \t \t \t link: '2-1',
\t \t \t \t sub: null
\t \t \t }]
\t \t }, {
\t \t \t name: 'Germany',
\t \t \t link: '9',
\t \t \t sub: [{
\t \t \t \t name: 'Bayern Munich',
\t \t \t \t link: '3-1',
\t \t \t \t sub: null
\t \t \t }, {
\t \t \t \t name: 'Borrusia Dortmund',
\t \t \t \t link: '3-2',
\t \t \t \t sub: null
\t \t \t }]
\t \t }]
};
var getMenuItem = function (itemData) {
var item = $("<li>")
.append(
$("<a>", {
href: '#' + itemData.link,
html: itemData.name
}));
if (itemData.sub) {
var subList = $("<ul>");
$.each(itemData.sub, function() {
subList.append(getMenuItem(this));
});
item.append(subList);
}
return item;
};
var $menu = $("#menu");
$.each(data.menu, function() {
$menu.append(
getMenuItem(this)
);
});
$menu.menu();
});<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
.ui-widget-content{padding-left: 20px;}
.ui-menu {
width: 150px;
height: 250px;
overflow-x: hidden;
direction: rtl;
padding-left: 20px;
}
.ui-menu {
overflow-y: hidden;
}
.ui-menu:hover {
overflow-y: scroll;
}
.ui-menu .ui-menu-item{
\t
\t float: left;
display: block;
}
.ui-widget .ui-widget{
\t position: fixed;
\t overflow: hidden;
\t direction: ltr;
\t padding-left: 0;
}
.ui-menu .ui-menu{
position: fixed;
}
::-webkit-scrollbar {
width: 13px;
}
body{
overflow-y:hidden;
padding-right:12px;
}
body:hover{
overflow-y:scroll;
padding-right:0px;
}
/* Track */
::-webkit-scrollbar-track {
background: gray;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: gray;
}
::-webkit-scrollbar-button {
background: #3C3838;
}
</style>
</head>
<body>
\t <ul id="menu" ></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</body>如何改善这种代码更好地为菜单项： *如果我点击菜单，除了它应该关闭另一个地方。 *如果菜单不适合屏幕自定义滚动应该出现（如下所示：long list menu）
当用户单击向上/向下箭头时，应该会发生滚动。菜单必须向上/向下滚动1项。我尝试了其他选项，但它不起作用。用纯JavaScript创建它会更好吗？