javascript - Accordion 菜单 - 事件状态

Question

我最近设法制作了 Accordion 菜单。除了我正在寻求帮助的这件事之外，我做了所有事情。

这是我的 Accordion 菜单:

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

如您所见，我已尝试将代码编写得尽可能简单。有两件事我无法处理:

第一。 )我为我的子菜单制作了一个悬停背景(仅) - 当它被点击时子菜单列表显示 - 我只想悬停子菜单项(带有橙色渐变)，而不是子菜单项菜单项，因为当您单击子菜单项时，它会从子菜单项中获取事件状态，将其删除并为自己分配。我在解决这个问题时遇到了问题。 ？

第二。 ) 它与子子菜单项有关。当我单击事件的子菜单项(橙色下划线)时，我希望子菜单项处于事件状态(覆盖橙色渐变背景)。还有一件事，如果子子菜单项处于事件状态，我希望它始终折叠起来。

如果您不清楚或我写错了什么，请纠正我，不要犹豫，询问更多详情。

非常感谢您的帮助。

谢谢。问候 -克里斯

Answer 1

虽然我绝对赞赏您的 Javascript 抽象，这几乎总是被认为是一种好处和适当的编码实践，但看起来您可能会牺牲对元素本身的控制；这很可能是因为您的每个菜单(子菜单、子子菜单)共享相同的类(“子菜单”)。

为了更好地控制您的 Javascript，可能值得为每个菜单元素指定不同的类名:

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(类:子菜单)

<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>