jQuery实战之仿淘宝商城左侧导航效果-前端开发

欢迎阅读本篇文章，本文将带你详细讲解“jQuery实战之仿淘宝商城左侧导航效果”的完整攻略，教你如何使用jQuery实现仿淘宝商城左侧导航栏效果。

欢迎阅读本篇文章，本文将带你详细讲解“jQuery实战之仿淘宝商城左侧导航效果”的完整攻略，教你如何使用jQuery实现仿淘宝商城左侧导航栏效果。

包含的技术点

HTML基础标签的应用
CSS样式定义及样式优化
jQuery基础知识
jQuery的DOM操作方法
jQuery的动画效果

实现步骤

步骤1：HTML结构

仿淘宝商城左侧导航栏的核心部分在于HTML结构，因此在HTML中需要用一个ul列表来展示分类信息。HTML代码如下：

<ul id="category">
    <li class="parent"><a href="#">女装</a></li>
    <li class="parent"><a href="#">男装</a></li>
    <li class="parent"><a href="#">鞋靴</a></li>
    <li class="parent"><a href="#">箱包</a></li>
    <li class="parent"><a href="#">饰品</a></li>
    <li class="parent"><a href="#">手机</a></li>
    <li class="parent"><a href="#">数码</a></li>
    <li class="parent"><a href="#">家电</a></li>
</ul>

步骤2：CSS样式

为了让左侧导航看起来更美观，我们需要为其定义样式。CSS代码如下：

#category {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}
#category li {
    position: relative;
    margin: 0;
    padding: 0;
}
#category li.parent > a {
    display: block;
    line-height: 40px;
    padding-left: 20px;
    cursor: pointer;
}
#category li.parent > ul {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}
#category li.active > a {
    color: #f60;
}
#category li.active > ul {
    display: block;
}
#category li.parent.haschild span {
    position: absolute;
    right: 10px;
    top: 15px;
    background: url(arrow.png) no-repeat 0 0;
    width: 14px;
    height: 10px;
    cursor: pointer;
}

其中，上述代码中定义了导航菜单以及hover效果等样式。

步骤3：jQuery事件处理

接下来，我们会在jQuery中处理具体的事件，其中包括展开菜单栏，收起菜单栏等操作。jQuery代码如下：

// 点击分类
$('#category li.parent > a').click(function () {
    // 如果点击的是当前菜单，则不做任何操作
    if ($(this).parent().hasClass('active')) {
        return false;
    }
    // 收起已经展开的菜单
    $('#category li.active > ul').slideUp('normal');
    $('#category li.active').removeClass('active');

    // 展开当前菜单
    $(this).next().slideDown('normal');
    $(this).parent().addClass('active');

    return false;
});

// 点击有子分类的分类，展开或收起子分类
$('#category li.parent.haschild').hover(function () {
        $(this).children('span').addClass('hover');
    },
    function() {
        $(this).children('span').removeClass('hover');
});

$('#category li.parent.haschild > span').click(function () {
    // 如果点击的是当前菜单，则不做任何操作
    if ($(this).parent().hasClass('active')) {
        return false;
    }
    // 收起已经展开的菜单
    $('#category li.active > ul').slideUp('normal');
    $('#category li.active').removeClass('active');

    // 展开当前菜单
    $(this).siblings('ul').slideDown('normal');
    $(this).parent().addClass('active');

    return false;
});

上述代码为点击左侧导航栏之后，展开或收起菜单栏的操作。其中，点击带有子菜单的导航菜单也能展开或收起子菜单。

示例1

在样式中通过 css 实现图片 hover 效果，通过 jQuery 实现点击效果。

#category li.parent.haschild span {
    background: url(arrow.png) no-repeat 0 0;
}
#category li.parent.haschild span.hover {
    background-position: 0 -10px;
}
#category li.parent.haschild.active span {
    background-position: 0 -20px;
}

// 点击子菜单
$('#category li.parent.haschild > span').click(function () {
    // 如果点击的是当前菜单，则收起
    if ($(this).parent().hasClass('active') && !$(this).hasClass('hover')) {
        $(this).siblings('ul').slideUp('normal');
        $(this).parent().removeClass('active');

        return false;
    }
    // 如果不是当前菜单，则按正常展开子菜单流程操作
    $('#category li.active > ul').slideUp('normal');
    $('#category li.active').removeClass('active');

    $(this).siblings('ul').slideDown('normal');
    $(this).parent().addClass('active');

    return false;
});

// hover子菜单
$('#category li.parent.haschild').hover(function () {
        $(this).children('span').addClass('hover');
    },
    function () {
        if (!$(this).hasClass('active')){
            $(this).children('span').removeClass('hover');
        }
    }
);

示例2

在示例2中，通过 jQuery 实现，点击当前菜单隐藏子菜单，鼠标离开子菜单隐藏子菜单等操作。

// 点击当前菜单隐藏子菜单
$('#category li.active > a').click(function () {
    $(this).siblings('ul').slideUp('normal');
    $(this).parent().removeClass('active');
});

// 鼠标离开子菜单隐藏子菜单
$('#category li.child').mouseleave(function () {
    $(this).parent().slideUp('normal');
    $(this).parent().parent('li').removeClass('active');
});