如何制作多級上下文菜單？

Question

我正在制作自定義上下文菜單，這是我的代碼。 在這里，我想添加一個多級自定義上下文。

[img] https://i.imgur.com/a0FwcdO.png[/img]

https://imgur.com/LKvOGXO

我嘗試在此處附加兩個li標簽

var view = d3.select（'＃contextMenuNode'）

view.html（ <li><a id="selectLinked1" tabindex="-1" href=#>View A</a></li> <li><a id="selectLinked2" tabindex="-1" href=#>View B</a></li> ）

Answer 1

看看這個。

 $(document).ready(function() { //Show contextmenu: $(document).contextmenu(function(e) { //Get window size: var winWidth = $(document).width(); var winHeight = $(document).height(); //Get pointer position: var posX = e.pageX; var posY = e.pageY; //Get contextmenu size: var menuWidth = $(".contextmenu").width(); var menuHeight = $(".contextmenu").height(); //Security margin: var secMargin = 10; //Prevent page overflow: if (posX + menuWidth + secMargin >= winWidth && posY + menuHeight + secMargin >= winHeight) { //Case 1: right-bottom overflow: posLeft = posX - menuWidth - secMargin + "px"; posTop = posY - menuHeight - secMargin + "px"; } else if (posX + menuWidth + secMargin >= winWidth) { //Case 2: right overflow: posLeft = posX - menuWidth - secMargin + "px"; posTop = posY + secMargin + "px"; } else if (posY + menuHeight + secMargin >= winHeight) { //Case 3: bottom overflow: posLeft = posX + secMargin + "px"; posTop = posY - menuHeight - secMargin + "px"; } else { //Case 4: default values: posLeft = posX + secMargin + "px"; posTop = posY + secMargin + "px"; }; //Display contextmenu: $(".contextmenu").css({ "left": posLeft, "top": posTop }).show(); //Prevent browser default contextmenu. return false; }); //Hide contextmenu: $(document).click(function() { $(".contextmenu").hide(); }); }); 

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; background: #DCE775; font-family: 'Merriweather', serif; } h1 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 1em; font-size: 2em; letter-spacing: .3em; color: #FFFFFF; text-align: center; border-top: 2px solid #E6EE9C; border-bottom: 2px solid #E6EE9C; } .contextmenu { display: none; position: absolute; width: 200px; margin: 0; padding: 0; background: #FFFFFF; border-radius: 5px; list-style: none; box-shadow: 0 15px 35px rgba(50, 50, 90, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); z-index: 999999; } .contextmenu li { border-left: 3px solid transparent; transition: ease .2s; } .contextmenu li a { display: block; padding: 10px; color: #B0BEC5; text-decoration: none; transition: ease .2s; } .contextmenu li:hover { background: #CE93D8; border-left: 3px solid #9C27B0; } .contextmenu li:hover a { color: #FFFFFF; } .submenu { display: none; } li:hover .submenu { display: block; position: absolute; top: 0px; width: 200px; right: -200px; background: #fff; padding: 0; } .submenu li { list-style: none; color: #B0BEC5; } .submenu li a { color: #B0BEC5 !important; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Right click!</h1> <ul class="contextmenu"> <li><a href="#">Hover Me</a> <ul class="submenu"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> </ul> </li> <li><a href="#">Link to somewhere</a></li> <li><a href="#">Another link</a></li> <li><a href="#">Link to nowhere</a></li> <li><a href="#">Random link</a></li> </ul> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">