Раскрывающееся меню навигации

0

Я делаю список столбцов с некоторыми раскрывающимися меню, и мне нужен JQuery для раскрывающегося списка, чтобы он работал.

Я нашел несколько Jquery для этого, но проблема в том, что у вас есть два меню с ul и li, вот так. HTML:

<ul class="list-menu">
<li class="sort-menu">4</li>
    <div class="sort-list-dropdown">
         <ul class="sort-list">
             <li>4</li>
         </ul>
    </div>
</ul>

Когда вы дублируете это два раза, а затем, когда вы нажимаете на кнопку 4 в классе, в котором указано sort-menu, он помещает два контейнера меню, а этот класс - sort-list-dropdown Я играл с JS, откуда я откуда-то, и я "Смущаюсь по этому поводу.

JavaScript:

    $("ul.list-menu > li").click(function () {
    var X = $(this).attr('id');
    if (X == 1) {
        $("ul.sort-list > li").hide();
        $(this).attr('id', '0');
    } else {
        $("ul.sort-list > li").show();
        $(this).attr('id', '1');
    }
});

//Mouse click on sub menu
$("ul.sort-list > li").mouseup(function () {
    return false;
});

//Mouse click on my account link
$("ul.list-menu > li").mouseup(function () {
    return false;
});


//Document Click
$(document).mouseup(function () {
    $("ul.sort-list > li").hide();
    $("ul.list-menu > li").attr('id', '');
});

Я получаю некоторые переменные, но я не думаю, что это код. Я думаю, мне нужно ввести новую переменную, но я не знаю, для чего она нужна.

Если кто-то знает, как это сделать, ответьте мне.

  • 3
    недействительный HTML
  • 0
    Итак, единственная проблема в том, что оба ваших меню открываются и закрываются в унисон?
Показать ещё 10 комментариев
Теги:
drop-down-menu

2 ответа

1

У меня есть один ответ на эту проблему. Пожалуйста, попробуйте следующий код:

$(document).ready(function() {
     $('.sort-list-dropdown').hide();
     $('ul.list-menu li').click(function() {
            $(this).next('.sort-list-dropdown').toggle();
     });
});

В коде " click " вы можете изменить его на " hover ".

Поделиться
  • 0
    Хороший звонок. Я ждал выноски, чтобы избежать использования логического выражения var для его переключения :-P.
0

Попробуйте что-то вроде этого:

http://jsfiddle.net/SinisterSystems/bmwBr/5/

HTML:

<ul>

    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>

        <li class="sec">Heading Two</li>
        <li><ul>
            <li>Third</li>
            <li>Third</li>
            <li>Third</li>
        </ul></li>

    </ul></li>

    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
    </ul></li>

</ul>

JS:

$(function(){
    $('li.sec').on('click', function() {
        $(this).next('li').slideToggle();
    });
});

CSS:

ul li {
    list-style:none;
}
.sec {
    background:#efefef;
    padding:25px;
    font-size:24px;
}

Попробуйте что-то вроде этого:

http://jsfiddle.net/SinisterSystems/bmwBr/5/

Поделиться
  • 0
    Всегда старайтесь, чтобы ваш JS был минимальным. С помощью этого кода, вы просто поставить sec класса Li на название вы хотите, и расширенную структуру Li ниже
  • 0
    Мне это нравится, но мне нужно нажать на кнопку мыши, поэтому, когда вы нажимаете 4, это вызовет сортировку.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню