javascript - 如何设计动态菜单

Question

基本上，我正在制作一个 google drive-esqe 网络应用程序，用于处理在应用程序中创建的用户笔记本和笔记的存储。

对于我的主屏幕，用户将看到他们所有的笔记本都呈现出来并且可以点击。当用户单击该元素时，该元素会突出显示并选中其各自的复选框(为什么我们都有这两个，我不知道。)然后菜单栏应该出现在顶部，为用户提供选项在该笔记本/笔记上执行。

菜单栏是整个应用程序导航栏的一部分，但菜单仅限于主页。

问题出在某些菜单选项的功能上。该应用程序当前的方式是用户可以选择多个元素，但是这样做时某些菜单选项会消失(例如，打开会消失，因为我们一次只希望打开一个笔记)。我目前不知道如何着手设计这个。主要是，我不知道如何跟踪突出显示的元素的数量(将在下面提供突出显示的片段)，也不知道如何让适当的菜单选项在适当的时候出现/消失。现在，我有一个包含所有菜单标题的 menubar.ejs，它包含在所有屏幕都可以访问的导航栏中 (<%-includemenubar.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"));
}

虽然这可能不是解决此问题的最佳方法，但这是我当时能想到的唯一方法。

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

Answer 1

要获取突出显示的所有元素，您可以使用 jquery 选择器:

$('.highlighted'); // returns an array of hightlighted items
$('.highlighted').length; // number of highlighted items

问题有点模糊，但在设计方面，请尝试从 View /上下文的 Angular 考虑应用程序，如果我打开一个便条应该能够看到什么？