Аккордеонное меню - активное состояние

0

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

Это мое меню для аккордеона:

HTML

<div class="sidebar-wrapper">
    <ul class="main_nav">
       <li><a href='#'>MAIN 1</a>
          <ul class="sub-menu">
             <li><a href='#'>SUB MENU</a>
                <ul class="sub-menu">
                   <li><a href='#'>SUB-SUB MENU</a></li>
                   <li><a href='#'>SUB-SUB MENU</a></li>
                   <li><a href='#'>SUB-SUB MENU</a></li>
                   <li><a href='#'>SUB-SUB MENU</a></li>
                   <li><a href='#'>SUB-SUB MENU</a></li>
                   <li><a href='#'>SUB-SUB MENU</a></li>
                </ul>
             </li>
             <li><a href='#'>SUB MENU</a>
                <ul class="sub-menu">
                   <li><a href='#'>SUB-SUB MENU</a></li>
                </ul>
             </li>
             <li><a href='#'>SUB MENU</a>
                <ul class="sub-menu">
                   <li><a href='#'>SUB-SUB MENU</a></li>
                </ul>
             </li>
             <li><a href='#'>SUB MENU</a>
               <ul class="sub-sub-menu">
                   <li><a href='#'>SUB-SUB MENU</a></li>
                </ul>
             </li>
             <li><a href='#'>SUB MENU</a>
                <ul class="sub-menu">
                   <li><a href='#'>SUB-SUB MENU</a></li>
                </ul>
             </li>
          </ul>
       </li>
       <li><a href='#'>MAIN 2</a></li>
    </ul>
    </div>

CSS

.sidebar-wrapper {
        width: 250px;
        margin-top: 30px;
    }

    .main_nav {
        width: 250px;
        list-style: none;
        padding: 40px 30px 25px 0;
        font-family: Arial;
    }

    ul.main_nav {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    ul.main_nav li {
        list-style-type: none;
    }

    ul.main_nav li a {
        background-image: url('../images/acmenu_bg.png');
        background-repeat: repeat-x;
        line-height: 10px;
        padding: 13px 10px;
        display: block;
        text-decoration: none;
        font-size: 13px;
        color: #fff;
        font-weight: bold;
        list-style: none;
    }

    ul.main_nav li a:hover {
        /* background-image: url('');  HOVER ?!*/
        color: #ef7b0b;
    }

    ul.main_nav ul {
        margin: 0;
        padding: 0;
        display: none;
    }

    ul.main_nav ul li {
        margin: 0;
        padding: 0;
        clear: both;
    }

    ul.main_nav ul li a {
        background-image: url('../images/acmenu2_bg.png');
        background-repeat: repeat-x;
        padding-left: 20px;
        font-size: 12px;
        font-weight: bold;
    }

    ul.main_nav ul li a:hover {
        color: #dcdcdc;
        /* HOVER */
    }

    ul.main_nav ul li a:active {
        background-image: url('../images/acmenu1_bg.png');
        background-repeat: repeat-x;
    }

    ul.main_nav ul ul li a {
        background: #f6f6f6;
        color: #000;
        padding-left: 40px;
        border-bottom: 1px solid #e7e7e7;
    }

    ul.main_nav ul ul li a:hover {
        color: #ef7b0b;
        text-decoration: underline;
    }

JS

$(document).ready(function() {
$('.sidebar-wrapper ul li a').click(function(ev) {
    $('.sidebar-wrapper .sub-menu').not($(this).parents('.sub-menu')).slideUp();
    $(this).next('.sub-menu').slideToggle();
    $('.main_nav ul li a').removeClass('active');
    $(this).addClass('active');
    ev.stopPropagation();
});
});

Пример моего аккордеона jsFiddle

Как вы можете видеть, я попытался написать код как можно проще. Есть две вещи, с которыми я не могу справиться:

Первый. ) Я сделал фон hover для моего подменю (только) - когда он щелкнул список под-подменю, показывается - я хотел бы иметь только элементы подменю, которые нужно зависнуть (с этим оранжевым градиентом), а не под-sub пункты меню, потому что, когда вы нажимаете элемент под-подменю, он принимает активное состояние из пункта подменю, удаляет его и назначает для себя. У меня проблема с этим. ?

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

Если вам что-то непонятно или я что-то не так написал, пожалуйста, поправьте меня и не стесняйтесь спрашивать подробности.

Я был бы очень признателен за вашу помощь.

Спасибо. Приветствия - Крис

  • 0
    Просто комментарий: вы можете пересмотреть свой стиль в пунктах подменю. Белый текст на светло-сером фоне не легко читается.
  • 0
    используйте jsfiddle.net, чтобы поделиться кодом, чтобы люди могли поиграть и предложить решение для вас
Показать ещё 2 комментария
Теги:
frontend

1 ответ

0

Хотя я определенно приветствую абстракцию вашего Javascript, который почти всегда считается преимуществом и правильной практикой кодирования, кажется, что вы можете жертвовать контролем над самими элементами; это, скорее всего, связано с тем, что каждое из ваших меню (подменю, под-подменю) имеет один и тот же класс ("подменю").

Чтобы получить больший контроль над вашим Javascript, может потребоваться указать разные имена классов для каждого из элементов меню:

Подменю (класс: подменю)

<ul class="sub-menu">
    <li><a href='#'>SUB-SUB MENU</a></li>
    <li><a href='#'>SUB-SUB MENU</a></li>
    <li><a href='#'>SUB-SUB MENU</a></li>
    <li><a href='#'>SUB-SUB MENU</a></li>
    <li><a href='#'>SUB-SUB MENU</a></li>
    <li><a href='#'>SUB-SUB MENU</a></li>
</ul>

Sub-Sub-Menu (класс: подменю)

<ul class="sub-menu">
    <li><a href='#'>SUB-SUB MENU</a></li>
</ul>

Указав различные имена классов, вы можете определить, что делать/не делать, когда к определенному элементу обращаются в DOM, а именно:

<ul class="sub-sub-menu">
    <li><a href='#'>SUB-SUB MENU</a></li>
</ul>
  • 0
    Вот ссылка на jsFiddle: jsfiddle.net/2897W/3 Итак, все, что вы предлагаете, - это просто изменить имена моего подменю и подменю и каким-либо образом изменить код javascript? Не говоря уже о том, что мои навыки работы с JS еще не очень хорошие, и у меня проблемы даже с такими простыми вещами, как эта, поэтому я и прошу помощи :)
  • 0
    Это общая идея, которую я предлагаю. И посмотрите на мой Javascript здесь ( mikechabot.org/js/links.js ), он контролирует три большие ссылки на mikechabot.org . Как вы могли заметить, я получаю идентификатор элемента DOM через var id = $ (this) .prop ("id"); И вы могли бы также легко найти некоторый код в Интернете, чтобы получить класс элемента. И когда у вас есть класс или идентификатор элемента, просто используйте оператор IF. Если (class === "sub-sub-menu") сделать это, иначе, сделать что-то еще. Имеет ли это смысл? Если нет, я мог бы предоставить код, когда вернусь домой.
Показать ещё 4 комментария
Сообщество Overcoder
Наверх
Меню