Question

I used the code found in this question to help me display an inline dropdown menu on a page. I need four of these on a single page though, and they will all use the same list of teaching strategies. I’ve tried everything I could think of, such as renaming all of the elements for a second menu but no luck.

I know it’s probably easy and obvious, but I’m not getting it. I’m probably changing things that I’m not supposed to. I’m pretty new to javascript and jquery (been using HTML, CSS, and a bit of PHP for years though), and while I can usually grasp things fairly well, it’s simple things like this that leave me stuck.

Here’s my code at this point:
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>

Any and all help is appreciated!

Answer 1

I wrapped your handler assignments into a function with the intended element’s id as the parameter so that you can assign it to multiple menus. Notice I also changed some of the markup; specifically, reduced specificity (heh) by getting rid of id=”sort” on the “click for strategies” span. Instead I used a data-sort-for attribute to link the element to its inline list.

    <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();
    });
}

Style:

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

test it here: http://jsfiddle.net/cgspicer/2WxQa/