CSS/jquery를 사용하여 여러 개의 인라인 드롭 다운 메뉴

Question

this question에있는 코드를 사용하여 페이지에 인라인 드롭 다운 메뉴를 표시하는 데 도움이되었습니다. 그래도 한 페이지에 4 개가 필요하며 모두 동일한 강의 전략 목록을 사용합니다. 내가 생각할 수있는 모든 것을 시도했는데, 예를 들어 두 번째 메뉴에는 모든 요소의 이름을 변경했지만 행운은 없다.

나는 그것이 쉽고 명백하다는 것을 안다. 그러나 나는 그것을 얻지 않고있다. 나는 내가하지 말아야 할 것들을 아마 바꿀거야. 나는 자바 스크립트와 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를 매개 변수로 사용하여 처리기 할당을 여러 메뉴에 지정할 수 있도록 처리기 할당을 래핑했습니다. 공지 사항 일부 마크 업을 변경했습니다. 구체적으로, "전략에 대한 클릭"범위에서 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> 

자바 스크립트 :

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/