jQuery点击滑过左则菜单

用jquery框架制作两种非常简单的jquery垂直手风琴菜单特效，鼠标滑过手风琴与鼠标点击触发手风琴。

源码：

<div class="demo">
    
    <h2>点击触发事件</h2>
    <div id="firstpane" class="menu_list">
        <p class="menu_head current">jquery图片特效</p>
        <div class="menu_body">
            <a href="" target="_blank">jquery图片切换</a>
            <a href="" target="_blank">jquery幻灯片</a>
            <a href="" target="_blank">jquery图片放大镜</a>
        </div>
            
        <p class="menu_head">jquery导航菜单</p>
        <div class="menu_body">
            <a href="" target="_blank">jquery动画菜单</a>
            <a href="" target="_blank">jquery树形菜单</a>
            <a href="" target="_blank">jquery下拉菜单</a>
        </div>
            
        <p class="menu_head">jquery选项卡特效</p>
        <div class="menu_body">
            <a href="" target="_blank">jquery选项卡切换</a>
            <a href="" target="_blank">jquery滑动选项卡</a>
            <a href="" target="_blank">jquery更多特效</a>       
        </div>
    </div><!--firstpane end-->
        
        
    <h2>滑过触发事件</h2>
    <div id="secondpane" class="menu_list">
        <p class="menu_head current">js图片特效</p>
        <div class="menu_body">
            <a href="" target="_blank" >js图片切换</a>
            <a href="" target="_blank">js幻灯片</a>
            <a href="" target="_blank">js图片放大镜</a>
        </div>
            
        <p class="menu_head">js导航菜单</p>
        <div class="menu_body">
            <a href="" target="_blank">js动画菜单</a>
            <a href="" target="_blank">js树形菜单</a>
            <a href="" target="_blank">js下拉菜单</a>
        </div>
            
        <p class="menu_head">js选项卡特效</p>
        <div class="menu_body">
            <a href="" target="_blank">js选项卡切换</a>
            <a href="" target="_blank">js滑动选项卡</a>
            <a href="" target="_blank">js更多特效</a>       
        </div>
    </div><!--secondpane end-->
    
</div><!--demo end-->

jquery 代码：

$(document).ready(function(){
    
    //幻灯片元素与类“menu_body”段与类“menu_head”时点击
    $("#firstpane .menu_body:eq(0)").show();
    $("#firstpane p.menu_head").click(function(){
        $(this).addClass("current").next("div.menu_body")
            .slideToggle(300).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().removeClass("current");
    });
        
    //滑动与类“menu_body”的元素，当鼠标悬停段
    $("#secondpane .menu_body:eq(0)").show();
    $("#secondpane p.menu_head").mouseover(function(){
        $(this).addClass("current").next("div.menu_body")
                .slideDown(500).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().removeClass("current");
    });
        
});

书生编辑