jQuery手风琴菜单(原创)

所属分类:导航-垂直导航,手风琴菜单

 15589  58  查看评论 (5)
jQuery手风琴菜单(原创) ie兼容7

更新时间:2017/12/19 下午5:02:00

更新说明:修改按钮图标大小,修改图标css样式,让列表不那么丑  ̄□ ̄||


使用很简单,引入页头样式以及jquery1.12.0的cdn,为了兼容性请使用1.12.0版本jquery.

支持2级菜单,颜色可以自行修改

相关插件-垂直导航,手风琴菜单

超酷的SVG左侧导航栏特效

超酷的SVG左侧导航栏特效(Cool SVG left navigation bar effects)
  垂直导航
 12157  116

jQuery后台左侧菜单导航

jQuery导航菜单 适用于后台网站侧边多级下拉导航菜单
  垂直导航
 45750  304

css3结合jQuery侧边导航酷炫展开效果

鼠标移入侧边栏,二级菜单3D展开 鼠标hover背景变色,鼠标移入二维码图片背景变色
  垂直导航
 20542  155

jquery下拉菜单导航

jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局,通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果
  垂直导航
 19083  61

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币

    流年 0
    2017/12/7 11:49:28

    怎么修改器点击事件,不是点击li而是点击那个图标

        0
        2017/12/12 17:25:21

        如果只有图标有点击事件感觉不交互不是很友好

        裂缝中的阳光0
        2018/4/18 22:37:41
        加个label,点图标和点击li一样的
    回复
    透进的丶阳光 ???? 0
    2017/9/11 11:03:11
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $(".list_dt").on("click",function () {
    
                $('.list_dd').stop();
                // stop 方法停止当前正在运行的动画
                
                $(this).siblings("dt").removeAttr("id");
                // removeAttr 移除同胞的ID属性
    
                if($(this).attr("id")=="open"){
                    // 如果ID == open
                    $(this).removeAttr("id").siblings("dd").slideUp();
                    //移除ID  同胞dd slideUp
                }else{
                    $(this).attr("id","open").next().slideDown().siblings("dd").slideUp();
                    //否则 添加ID open 返回他的同级ID为open的下一兄弟节点,并且上拉隐藏,同级dd slideUp
                }
            });
            $(".list_dd li").click(function(){
                $(this).addClass("addclassSlideUp");
                $(this).siblings().removeClass("addclassSlideUp");
                $(this).parents("dd").siblings("dd").find("li").removeClass("addclassSlideUp");
            })
        </script>

    0分我贴代码了 加了个选中样式效果   感觉两个去除样式写的繁琐 有大神简化下吗

        0
        2017/9/15 11:04:20

        似乎可以这样:

        $(".list_dd li").click(function() {
            $(".list_dl li").removeClass("addclassSlideUp");
            $(this).addClass("addclassSlideUp");
        })
    回复
取消回复