此代码处于默认设置中，列表向右打开，但我想向左打开此列表并将菜单移动到页面右侧。 当您单击 Word 文件时，菜单列表将被整理，当您单击新单词时，将打开一个新列表。我想在左侧打开这个新列表。 解决方案是什么？守则：
var MainMenu = function () {
var activated = false;
var settings = {
disabledClass: 'disabled',
submenuClass: 'submenu'
}
var mask = '<div id="menu-top-mask" style="height: 2px; background-color: #fff; z-index:1001;"/>';
var timeOut;
this.init = function (p) {
$.extend(settings, p);
$mask = $('#menu-top-mask');
$('ul.main-menu > li').click(function (event) {
var target = $(event.target);
if (target.hasClass(settings.disabledClass) || target.parents().hasClass(settings.disabledClass) || target.hasClass(settings.submenuClass)) {
return;
}
toggleMenuItem($(this));
});
$('ul.main-menu > li > ul li').click(function (event) {
// Prevent click event to propagate to parent elements
event.stopPropagation();
// Prevent any operations if item is disabled
if ($(this).hasClass(settings.disabledClass)) {
return;
}
// If item is active, check if there are submenus (ul elements inside current li)
if ($(this).has( "ul" ).length > 0) {
// Automatically toggle submenu, if any
toggleSubMenu($(this));
}
else{
// If there are no submenus, close main menu.
closeMainMenu();
}
});
$('ul.main-menu > li').mouseenter(function () {
if (activated && $(this).hasClass('active-menu') == false) {
toggleMenuItem($(this));
}
});
$('ul.main-menu > li > ul li').mouseenter(function (e) {
// Hide all other opened submenus in same level of this item
$el = $(e.target);
if ($el.hasClass('separator')) return;
clearTimeout(timeOut);
var parent = $el.closest('ul');
parent.find('ul.active-sub-menu').each(function () {
if ($(this) != $el)
$(this).removeClass('active-sub-menu').hide();
});
// Show submenu of selected item
if ($el.children().size() > 0) {
timeOut = setTimeout(function () { toggleSubMenu($el) }, 500);
}
});
$('ul.main-menu > li > ul li').each(function () {
if ($(this).children('ul').size() > 0) {
$(this).addClass(settings.submenuClass);
}
});
$('ul.main-menu li.' + settings.disabledClass).bind('click', function (e) {
e.preventDefault();
});
//#region - Toggle Main Menu Item -
toggleMenuItem = function (el) {
// Hide all open submenus
$('.active-sub-menu').removeClass('active-sub-menu').hide();
$('#menu-top-mask').remove();
var submenu = el.find("ul:first");
var top = parseInt(el.css('padding-bottom').replace("px", ""), 10) + parseInt(el.css('padding-top').replace("px", ""), 10) +
el.position().top +
el.height();
submenu.prepend($(mask));
var $mask = $('#menu-top-mask');
var maskWidth = el.width() +
parseInt(el.css('padding-left').replace("px", ""), 10) +
parseInt(el.css('padding-right').replace("px", ""), 10);
$mask.css({ position: 'absolute',
top: '-1px',
width: (maskWidth) + 'px'
});
submenu.css({
position: 'absolute',
top: top + 'px',
left: el.offset().left + 'px',
zIndex: 100
});
submenu.stop().toggle();
activated = submenu.is(":hidden") == false;
!activated ? el.removeClass('active-menu') : el.addClass('active-menu');
if (activated) {
$('.active-menu').each(function () {
if ($(this).offset().left != el.offset().left) {
$(this).removeClass('active-menu');
$(this).find("ul:first").hide();
}
});
}
}
//#endregion
//#region - Toggle Sub Menu Item -
toggleSubMenu = function (el) {
if (el.hasClass(settings.disabledClass)) {
return;
}
var submenu = el.find("ul:first");
var paddingLeft = parseInt(el.css('padding-right').replace('px', ''), 10);
var borderTop = parseInt(el.css('border-top-width').replace("px", ""), 10);
borderTop = !isNaN(borderTop) ? borderTop : 1;
var top = el.position().top - borderTop;
submenu.css({
position: 'absolute',
top: top + 'px',
left: el.width() + paddingLeft + 'px',
zIndex: 1000
});
submenu.addClass('active-sub-menu');
submenu.show();
//el.mouseleave(function () {
// submenu.hide();
//});
}
//#endregion
closeMainMenu = function () {
activated = false;
$('.active-menu').find("ul:first").hide();
$('.active-menu').removeClass('active-menu');
$('.active-sub-menu').hide();
};
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMainMenu();
}
});
$(document).bind('click', function (event) {
var target = $(event.target);
if (!target.hasClass('active-menu') && !target.parents().hasClass('active-menu')) {
closeMainMenu();
}
});
}
}
$(document).ready(function () {
new MainMenu().init();
});#menu-bar
{
}
ul.main-menu
{
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 0px;
}
ul.main-menu > li
{
margin: 0;
display: inline;
list-style-type: none;
padding: 6px 4px 6px 6px;
line-height: 28px;
vertical-align: middle;
cursor: default;
outline: none;
border-style: solid;
border-width: 1px 1px 0 1px;
border-color: transparent;
}
ul.main-menu > li.active-menu
{
background-color: #fff;
border-color: #ccc;
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
ul.main-menu ul li a
{
color: #000;
text-decoration: none;
display: block;
white-space: nowrap;
}
ul.main-menu li ul li a span
{
font-size: 11px;
color: #999;
float:right;
right: 10px;
left: auto;
position: absolute;
}
/* SUBMENU */
ul.main-menu > li ul
{
list-style-type: none;
padding: 0;
margin: 0;
display: none;
border-width:1px;
border-style: solid;
border-color: #ccc;
background-color: #fff;
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
ul.main-menu li ul li
{
display:list-item;
margin: 0;
line-height: 26px;
padding-right: 40px;
min-width: 100px;
cursor: pointer;
text-indent: 30px;
white-space:nowrap;
}
ul.main-menu a:hover{
background-color: #ff4718;
color: #FFFFFF;
}
ul.main-menu li:hover
{
background-color: #ff4718;
color: #FFFFFF;
}
ul.main-menu li.active-menu:hover
{
background-color: #ff4718;
color: #FFFFFF;
}
ul.main-menu li ul li.disabled, ul.main-menu li ul li.disabled:hover, ul.main-menu li ul li.disabled:hover a
{
cursor:default;
background-color: #ff4718;
color: #FFFFFF;
}
ul.main-menu li.separator
{
border-top: 1px solid #ddd;
margin-top: 5px;
margin-bottom: 5px;
}
.submenu
{
background-image: url(../images/menu-right-arrow.png);
background-repeat: no-repeat;
background-position: right center;
}<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="menu-bar">
<ul class="main-menu">
<li>
File
<ul>
<li>
<li><a href="#">New</a>
<ul>
<li><a href="#">Data</a></li>
<li><a href="#">Storage</a></li>
<li><a href="#">Network</a></li>
</ul>
</li>
</li>
<ul>
<li><a href="#">Google search (opens in new tab)</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Document</a></li>
<li><a href="#">Client</a></li>
</ul>
</li>
<!--<li class="separator"></li>-->
<li><a href="#">Save<span>Ctrl+S</span></a></li>
<li><a href="#">Import</a></li>
<li><a href="#">Export</a></li>
<li><a href="#">Print<span>Ctrl+P</span></a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
<!-- end mainmenu -->
</div>如果您更新此 css：
#menu-bar {
justify-content: flex-end;
display: flex;
}
并更新此 JS：
submenu.css({
position: 'absolute',
top: top + 'px',
left: 'auto',
right: '0'
zIndex: 100
});
我相信它应该可以解决问题。
编辑：我添加了正确的："0"。
ul {
position: fixed; right: 0; top:0;
}