如何设计动态菜单

基本上，我正在制作一个谷歌硬盘esqe网络应用程序，它处理用户笔记本和应用程序中创建的笔记的存储。

对于我的主屏幕，用户将看到他们所有的笔记本都被渲染出来，并且可以点击。当用户点击该项目时，该项目会高亮显示，并选中相应的复选框（我不知道为什么我们都有），然后顶部会出现一个菜单栏，为用户提供对该笔记本/笔记执行操作的选项。

菜单栏相当于应用程序范围内的导航栏，但菜单仅限于主页。

问题出在某些菜单选项的功能上。该应用程序目前的状态是，用户可以选择多个项目，但在这样做时，一些菜单选项将消失（例如，Open将消失，因为我们一次只想打开一张纸条）。我目前不知道如何设计这个。主要是，我不知道如何跟踪高亮显示项目的数量（将在下面为高亮显示提供一个片段），也不知道如何在适当的时候显示/消失适当的菜单选项。现在，我有一个包含所有菜单标题的menubar.ejs，它也包含在所有屏幕都可以访问的导航栏中（<%-includemunbar.ejs%>）。

菜单栏.ejs

<ul class="menu">
<li><a href="/home">Home</a></li>
<li><a href="#">Create</a></li>
<li><a href="/selectedNotebook">Open</a></li>
<li><a href="#">Download</a></li>
<li><a href="/share">Share</a></li>
<li><a href="#">Delete</a></li>
</ul>

突出显示：

var itemSelect = function(){
$('.searchResult').click(function(){
$(this).toggleClass("highlighted");
var check= $(this).find('.checkbox');
check.prop('checked', !check.prop("checked"));
}

虽然这可能不是最好的方法，但这是我当时唯一能想到的方法。

我真的对所有这些语言都很陌生，所以这对我来说是一项非常艰巨的任务。非常感谢任何帮助！希望我已经提供了足够的信息，但如果没有，我会尽我所能指定更多信息或在需要的地方添加更多信息。