我使用了在 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>
感谢任何帮助!
最佳答案
我将您的处理程序分配包装到一个函数中,并将预期元素的 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;
}
关于jquery - 使用 css/jquery 的多个内联下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13725728/