JSON数据多个下拉菜单
JSON数据多个下拉菜单
提问于 2016-02-26 03:09:59
我尝试为JSON创建可配置的悬停多个下拉上下文菜单。
$(function () {
var data = {
menu: [{
name: 'Ukraine',
link: '0',
sub: null
}, {
name: 'Croatia',
link: '1',
sub: null
}, {
name: 'Denmark',
link: '2',
sub: null
}, {
name: 'Canada',
link: '3',
sub: null
}, {
name: 'Columbia',
link: '4',
sub: null
}, {
name: 'Japan',
link: '5',
sub: null
}, {
name: 'Wales',
link: '6',
sub: null
}, {
name: 'England',
link: '7',
sub: [{
name: 'Arsenal',
link: '0-0',
sub: null
}, {
name: 'Liverpool',
link: '0-1',
sub: null
}, {
name: 'Manchester United',
link: '0-2',
sub: null
}]
}, {
name: 'Spain',
link: '8',
sub: [{
name: 'Barcelona',
link: '2-0',
sub: null
}, {
name: 'Real Madrid',
link: '2-1',
sub: null
}]
}, {
name: 'Germany',
link: '9',
sub: [{
name: 'Bayern Munich',
link: '3-1',
sub: null
}, {
name: 'Borrusia Dortmund',
link: '3-2',
sub: null
}]
}]
};
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{
float: left;
display: block;
}
.ui-widget .ui-widget{
position: fixed;
overflow: hidden;
direction: ltr;
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>
<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创建它是不是更好？
回答 1
Stack Overflow用户
发布于 2016-02-26 06:29:14
您可以在页面上添加一个显示/隐藏菜单的跨度
$('#showmenu').on(' mouseover', function() {
$menu.show().focus();
});
$menu.on('mouseleave',function(){
$(this).hide();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35636176
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号