Несколько встроенных выпадающих меню с использованием css/jquery

Я использовал код, найденный в этот вопрос, чтобы помочь мне отобразить встроенное раскрывающееся меню на странице. Однако мне нужно четыре из них на одной странице, и все они будут использовать один и тот же список стратегий обучения. Я пробовал все, что мог придумать, например, переименовать все элементы для второго меню, но безуспешно.

Я знаю, что это, вероятно, легко и очевидно, но я не понимаю. Я, вероятно, меняю вещи, которые я не должен делать. Я новичок в 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>

Любая помощь приветствуется!


menu drop-down-menu jquery css inline-editing
person K. S.    schedule 05.12.2012    source источник
comment
Вы должны искать более гибкие выпадающие решения, которых много. Этот конкретный код потребует существенной модификации для размещения нескольких экземпляров, поскольку он использует идентификаторы в качестве селекторов вместо классов и требует ручного связывания триггера с целью.   -  person crowjonah    schedule 05.12.2012
comment
Посмотрите, сможете ли вы придумать, как повторить что-то вроде этого: css-tricks.com/examples/SimplejQueryDropdowns< /а>   -  person crowjonah    schedule 05.12.2012
comment
Спасибо за Ваш ответ! Проблема, с которой я столкнулся, немного странная и ограничивает мои возможности. Элемент, выбранный из меню, должен оставаться выбранным при сохранении через браузер. Это шаблон плана урока, который требует, чтобы пользователь сохранил его на своем компьютере с помощью функции сохранения браузера, поэтому все выбранное должно оставаться выделенным при просмотре в автономном режиме, поскольку оно отображалось в Интернете. Это единственный скрипт, который я нашел до сих пор, который соответствует этому требованию, и я не знаю, связано ли это с тем фактом, что он использует идентификаторы в качестве селекторов.   -  person K. S.    schedule 05.12.2012

Ответы (1)


arrow_upward
0
arrow_downward

Я обернул ваши назначения обработчика в функцию с предполагаемым идентификатором элемента в качестве параметра, чтобы вы могли назначить его нескольким меню. Обратите внимание, что я также изменил часть разметки; в частности, снижение специфичности (хе-хе) за счет избавления от 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/

person cgspicer    schedule 05.12.2012
comment
Спасибо большое! Это фантастика, и чище, чем я ожидал. - person K. S.; 05.12.2012