我有以下代码片段，想知道是否有可能更新它以实现此菜单行为：
第一步。鼠标悬停在“链接1”上——>它将向右平移1.5em（已设置）；
第二步。单击“链接1”——>菜单按钮将保持固定位置，在已经平移的位置（已完成，特别感谢@guest271314），直到单击新的菜单按钮（尚未设置）并加载另一页。
注意：下一个/上一个按钮代码部分保持不变（如果必须，可以进行编辑以保持功能）。
注意2：最终解决方案将在WordPress中实施，而不是静态的html网页中。
第一步。鼠标悬停在“链接1”上——>它将向右平移1.5em（已设置）；
第二步。单击“链接1”——>菜单按钮将保持固定位置，在已经平移的位置（已完成，特别感谢@guest271314），直到单击新的菜单按钮（尚未设置）并加载另一页。
注意：下一个/上一个按钮代码部分保持不变（如果必须，可以进行编辑以保持功能）。
注意2：最终解决方案将在WordPress中实施，而不是静态的html网页中。
$(function () {
$('nav ul li').click(function (e) {
//Set the aesthetics (similar to :hover)
$('nav ul li')
.not(".clicked").removeClass('hovered')
.filter(this).addClass("clicked hovered")
.siblings().toggleClass("clicked hovered", false);
}).hover(function () {
$(this).addClass("hovered")
}, function () {
$(this).not(".clicked").removeClass("hovered")
});
var pageSize = 4,
$links = $(".pagedMenu li"),
count = $links.length,
numPages = Math.ceil(count / pageSize),
curPage = 1;
showPage(curPage);
function showPage(whichPage) {
var previousLinks = (whichPage - 1) * pageSize,
nextLinks = (previousLinks + pageSize);
$links.show();
$links.slice(0, previousLinks).hide();
$links.slice(nextLinks).hide();
showPrevNext();
}
function showPrevNext() {
if ((numPages > 0) && (curPage < numPages)) {
$("#nextPage").removeClass('hidden');
$("#msg").text("(" + curPage + " of " + numPages + ")");
} else {
$("#nextPage").addClass('hidden');
}
if ((numPages > 0) && (curPage > 1)) {
$("#prevPage").removeClass('hidden');
$("#msg").text("(" + curPage + " of " + numPages + ")");
} else {
$("#prevPage").addClass('hidden');
}
}
$("#nextPage").on("click", function () {
showPage(++curPage);
});
$("#prevPage").on("click", function () {
showPage(--curPage);
});
});.hidden {
display: none;
}
body {
font: normal 1.0em Arial, sans-serif;
}
nav.pagedMenu {
color: red;
font-size: 2.0em;
line-height: 1.0em;
width: 8em;
position: fixed;
top: 50px;
}
nav.pagedMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
nav.pagedMenu ul li {
height: 1.0em;
padding: 0.15em;
position: relative;
border-top-right-radius: 0em;
border-bottom-right-radius: 0em;
-webkit-transition:
-webkit-transform 220ms, background-color 200ms, color 500ms;
transition: transform 220ms, background-color 200ms, color 500ms;
}
nav.pagedMenu ul li.hovered {
-webkit-transform: translateX(1.5em);
transform: translateX(1.5em);
}
nav ul li:hover a {
transition: color, 1200ms;
color: red;
}
nav.pagedMenu ul li span {
display:block;
font-family: Arial;
position: absolute;
font-size:1em;
line-height: 1.25em;
height:1.0em;
top:0; bottom:0;
margin:auto;
right: 0.01em;
color: #F8F6FF;
}
a {
color: gold;
transition: color, 1200ms;
text-decoration: none;
}
#pagination, #prevPage, #nextPage {
font-size: 1.0em;
color: gold;
line-height: 1.0em;
padding-top: 250px;
padding-left: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pagedMenu">
<ul style="font-size: 28px;">
<li class="" style="margin-bottom: 5px;"><a href="#">Link 1</a></li>
<li class="" style="margin-bottom: 5px;"><a href="#">Link 2</a></li>
<li class="" style="margin-bottom: 5px;"><a href="#">Link 3</a></li>
<li class="" style="margin-bottom: 5px;"><a href="#">Link 4</a></li>
<li class="" style="margin-bottom: 5px;"><a href="#">Link 5</a></li>
<li class="" style="margin-bottom: 5px;"><a href="#">Link 6</a></li>
<li class="" style="margin-bottom: 5px;"><a href="#">Link 7</a></li>
<li class="" style="margin-bottom: 5px;"><a href="#">Link 8</a></li>
<li class="" style="margin-bottom: 5px;"><a href="#">Link 9</a></li>
<li class="" style="margin-bottom: 5px;"><a href="#">Link 10</a></li>
<li class="" style="margin-bottom: 5px;"><a href="#">Link 11</a></li>
<li class="" style="margin-bottom: 5px;"><a href="#">Link 12</a></li>
</ul>
</nav>
<div id="pagination">
<a href="#" id="prevPage" class="hidden">Previous</a>
<a href="#" id="nextPage" class="hidden">Next</a>
<span id="msg"></span>
</div>关于@Lars的评论：
这种状态将适用于所有用户（我认为是这样的？只要菜单在每个页面上显示，不受浏览器类型或会话的限制，这是最好的选择）；
还有关于存储位置，将状态保存在本地、服务器端都不是问题，但如果我能得到一些利弊分析，就会更好做出正确的决定；
最后，如果这有所帮助，为了看到整个画面，您可以使用此实时链接作为示例；有一个类似的菜单与上述描述相似，关于状态，如果有可以实现的模型，我很高兴找到它。