1

この質問で見つかったコードを使用して、ページにインラインドロップダウンメニューを表示しました。ただし、1つのページにこれらのうち4つが必要であり、それらはすべて同じ教育戦略のリストを使用します。2番目のメニューのすべての要素の名前を変更するなど、考えられるすべてのことを試しましたが、うまくいきませんでした。

私はそれがおそらく簡単で明白であることを知っていますが、私はそれを理解していません。私はおそらく私がしてはいけないことを変えているでしょう。私は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>

ありとあらゆる助けに感謝します！

4

1 に答える 1

0

複数のメニューに割り当てることができるように、目的の要素の ID をパラメーターとして使用して、ハンドラーの割り当てを関数にラップしました。マークアップの一部も変更したことに注意してください。具体的には、「戦略のクリック」スパンで id="sort" を取り除くことにより、特異性を減らしました (へー)。代わりに、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/

于 2012-12-05T15:11:52.667 に答える