手风琴菜单-活动状态

Question

I've lately managed to make my accordion menu. I did everything besides this one thing I'm looking for help.

This is my accordion menu:

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();
});
});

My accordion menu example jsFiddle

As you can see I've tried to write the code as simple as possible. There are 2 things I can't handle with:

1st. ) I made a hover background to my sub-menus (only) - when It's clicked sub-sub menu list is showing - I would like to have only sub-menu items to be hovered (with that orange gradient), not sub-sub menu items, because when you click on sub-sub menu item it takes active state from sub-menu item, remove it and assign for yourself. I have a problem fixing that. ?

2nd. ) It's related to sub sub menu items. I would like to have sub-menu item active (covered with orange gradient background) when I have active sub sub menu item clicked (which is orange underline). One more thing, I'd like it to be always collapsed if sub sub menu item is active.

If something is unclear to you or I wrote something wrong please correct me and do not hesitate to ask for more details.

I would really appreciate for your help.

Thank you. Greetings - Chris

Answer 1

While I definitely applaud the abstraction of your Javascript, which is almost always considered a benefit and a proper coding practice, it appears as though you may be sacrificing control of the elements themselves; this is most likely due to the fact that each of your menus (sub-menu, sub-sub-menu) share the same class ("sub-menu").

In order to gain greater control over your Javascript, it might be worth specifying distinct class names for each of the menu elements:

Sub-Menu (class: sub-menu)

<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 (class: sub-menu)

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

By specifying distinct class names, you can determine what to do/not do when a certain element is accessed in the DOM, that is:

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