使用css/jquery的多行內嵌下拉菜單

Question

我使用this question中的代碼來幫助我在頁面上顯示內聯下拉菜單。儘管我在一個頁面上需要四個，他們都會使用相同的教學策略列表。我嘗試了所有我能想到的方法，例如將所有元素重命名爲第二個菜單，但沒有運氣。

我知道這可能很簡單明顯，但我沒有明白。我可能正在改變我不應該做的事情。我對javascript和jquery很新穎（雖然多年來一直使用HTML，CSS和一些PHP），雖然我通常可以很好地把握事情，但這很簡單，這使我陷入困境。

這裏是我的代碼在這一點： http://jsfiddle.net/8npjQ/

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script> 
<div id="somecontent"><span id="sort" href="#">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> 

<script type="application/javascript"> 
var $menu = $('#pop'); 

$('#sort').click(function(e) { 
$menu.css({ 
    "left": e.offsetX + "px", 
    "top": e.offSetY + "px" 
}).show(); 
}); 

$('#pop .link').click(function(e) { 
    var ele = $(this); 
    var sortKey = ele.attr('data-sort'); // save it somewhere 
$('#sort').html(ele.html() 
); 

$menu.hide(); 
}); 
</script> 

<style type="text/css"> 
#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; 
} 

</style> 

任何和所有幫助表示讚賞！

Answer 1

我將你的處理程序分配包裝到一個函數中，並將目標元素的id作爲參數，以便您可以將其分配給多個菜單。注意我也改變了一些標記;特別是通過在「click for strategies」跨度上刪除id =「sort」來降低特異性（heh）。相反，我使用了data-sort-for屬性將元素鏈接到內聯列表中。

<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> 

的Javascript：

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; 
}​ 

測試：http://jsfiddle.net/cgspicer/2WxQa/