Question

我尝试创建可配置为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创建它会更好吗？

Answer 1

您可以在页面上添加一个显示/隐藏菜单的范围

  $('#showmenu').on(' mouseover', function() {
    $menu.show().focus();
  });
  $menu.on('mouseleave',function(){
    $(this).hide();
  });

在此处查看此操作：https://jsfiddle.net/MarkSchultheiss/sm3wpmLa/

JSON数据多下拉菜单

1 个答案: