使用css/jquery的多个内联下拉菜单

我使用中的代码帮助我在页面上显示内联下拉菜单。不过，我需要在一页中列出其中的四个，它们将使用相同的教学策略列表。我已经尝试了我能想到的一切，比如为第二个菜单重命名所有元素，但没有成功

我知道这可能很简单也很明显，但我不明白。我可能正在改变我不应该改变的事情。我对javascript和jquery非常陌生，但多年来我一直在使用HTML、CSS和一点PHP，虽然我通常能很好地掌握一些东西，但像这样的简单事情让我陷入困境

这是我的代码：

---

感谢您的任何帮助

我将处理程序分配包装到一个函数中，该函数使用预期元素的id作为参数，以便您可以将其分配给多个菜单。注意，我还更改了一些标记；具体来说，通过在单击策略范围时去掉id=sort，降低了特异性。相反，我使用属性的数据排序将元素链接到其内联列表

    <div id="somecontent"><span class="sort" href="#" data-sort-for="pop">Click for Strategies</span></div>
<div id="pop">
    <div class="link" data-sort="dq1-1" >DQ1-1: Providing Clear Learning Goals and Scales (Rubrics)</div>
    <div class="link" data-sort="dq1-2">DQ1-2: Tracking Student Progress</div>
    <div class="link" data-sort="dq1-3">DQ1-3: Celebrating Success</div>
    <div class="link" data-sort="dq6-4">DQ6-4: Establishing Classroom Routines</div>
    <div class="link" data-sort="dq6-5">DQ6-5: Organizing the Physical Layout of the Classroom</div>
    <div class="link" data-sort="dq2-6">DQ2-6: Identifying Critical Information</div>
    <div class="link" data-sort="dq2-7">DQ2-7: Organizing Students to Interact with New Knowledge</div>
    <div class="link" data-sort="dq2-8">DQ2-8: Previewing New Content</div>
    <div class="link" data-sort="dq2-9">DQ2-9: Chunking Content into "Digestible Bites"</div>
    <div class="link" data-sort="dq2-10">DQ2-10: Processing of New Information</div>
    <div class="link" data-sort="dq2-11">DQ2-11: Elaborating on New Information</div>
    <div class="link" data-sort="dq2-12">DQ2-12: Recording and Representing Knowledge</div>
    <div class="link" data-sort="dq2-13">DQ2-13: Reflecting on Learning</div>
</div>
<div id="someothercontent"><span class="sort" href="#" data-sort-for="popTwo">Click for Strategies</span></div>
<div id="popTwo">
    <div class="link" data-sort="dq1-1" >DQ1-1: Providing Clear Learning Goals and Scales (Rubrics)</div>
    <div class="link" data-sort="dq1-2">DQ1-2: Tracking Student Progress</div>
    <div class="link" data-sort="dq1-3">DQ1-3: Celebrating Success</div>
    <div class="link" data-sort="dq6-4">DQ6-4: Establishing Classroom Routines</div>
    <div class="link" data-sort="dq6-5">DQ6-5: Organizing the Physical Layout of the Classroom</div>
    <div class="link" data-sort="dq2-6">DQ2-6: Identifying Critical Information</div>
    <div class="link" data-sort="dq2-7">DQ2-7: Organizing Students to Interact with New Knowledge</div>
</div>

风格：

.sort{
 color: black;
 border-bottom: 1px dotted blue;  
}

#pop2{
 color: #444;   
 width: 205px;
 border: 1px solid #ccc;
 padding: 5px;
 display: none;
 position: absolute;
line-height:140%;
background:#FFFFFF;
}

.link:hover {
 color: red;
 cursor: pointer;
}​

---

在这里测试：

您应该寻找更灵活的下拉解决方案，其中有很多。这段特殊的代码需要进行不可忽略的修改以适应多个实例，因为它使用ID作为选择器而不是类，并且需要手动将触发器与目标关联起来。看看您是否能够找到类似这样的复制方法：谢谢您的回答！不过，我面临的问题有点奇怪，限制了我的选择。从菜单中选择的项目在通过浏览器保存时必须保持选中状态。这是一个课程计划模板，要求用户使用浏览器的保存功能将其保存到计算机中，因此，当脱机查看时，选定的任何内容都必须保持选中状态，因为它显示为联机。这是迄今为止我发现的唯一一个符合该要求的脚本，我不知道这是否与它使用ID作为选择器有关。非常感谢！这太棒了，比我想象的还要干净。

makeDropdown( '#pop' );
makeDropdown( '#popTwo' );
function makeDropdown( menu ) {
    var $menu = $( menu );
    var sorter = 'span.sort[data-sort-for='+ $menu.attr('id') +']';
    $( sorter ).click(function(e) {
        $menu.css({
            "left": e.offsetX + "px",
            "top": e.offSetY + "px"
        }).show();
    });

    $( menu + ' .link' ).click(function(e) {
        var ele = $(this);
        var sortKey = ele.attr('data-sort'); // save it somewhere
        $( sorter ).html( ele.html() );
        $menu.hide();
    });
}

.sort{
 color: black;
 border-bottom: 1px dotted blue;  
}

#pop2{
 color: #444;   
 width: 205px;
 border: 1px solid #ccc;
 padding: 5px;
 display: none;
 position: absolute;
line-height:140%;
background:#FFFFFF;
}

.link:hover {
 color: red;
 cursor: pointer;
}​