Question

我最近设法制作了手风琴菜单。除了这一件事，我做了一切，我正在寻求帮助。

这是我的手风琴菜单：

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的抽象，这几乎总是被认为是一种好处和正确的编码实践，但似乎你可能正在牺牲对元素本身的控制;这很可能是由于您的每个菜单（子菜单，子子菜单）共享同一个类（＆＃34;子菜单＆＃34;）。

为了更好地控制您的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>

子子菜单（类：子菜单）

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

手风琴菜单 - 活动状态

1 个答案: