左侧手风琴下拉菜单导航(网页常用功能)

效果如下:

左侧手风琴下拉菜单导航(网页常用功能)_第1张图片

代码如下:

html:

<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="author" Content="li">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery手风琴下拉菜单代码 - 站长素材title>

<link rel="stylesheet" href="css/index.css">

head>
<body>
<center>
<dl class="list_dl">
    <dt class="list_dt">
        <span class="_after">span>
        <p>选择器p>
        <i class="list_dt_icon">i>
    dt>
    <dd class="list_dd">
        <ul>
            <li class="list_li">#idli>
            <li class="list_li">elementli>
            <li class="list_li">.classli>
            <li class="list_li">*li>
        ul>
    dd>
    <dt class="list_dt">
        <span class="_after">span>
        <p>属性p>
        <i class="list_dt_icon">i>
    dt>
    <dd class="list_dd">
        <ul>
            <li class="list_li">attrli>
            <li class="list_li">removeAttrli>
            <li class="list_li">propli>
            <li class="list_li">removePropli>
            <li class="list_li">addClassli>
            <li class="list_li">removeClassli>
        ul>
    dd>
    <dt class="list_dt">
        <span class="_after">span>
        <p>文档处理p>
        <i class="list_dt_icon">i>
    dt>
    <dd class="list_dd">
        <ul>
            <li class="list_li">appendli>
            <li class="list_li">appendToli>
            <li class="list_li">prependli>
            <li class="list_li">prependToli>
            <li class="list_li">afterli>
            <li class="list_li">beforeli>
        ul>
    dd>
    <dt class="list_dt">
        <span class="_after">span>
        <p>事件p>
        <i class="list_dt_icon">i>
    dt>
    <dd class="list_dd">
        <ul>
            <li class="list_li">readyli>
            <li class="list_li">onli>
            <li class="list_li">offli>
            <li class="list_li">bindli>
            <li class="list_li">oneli>
            <li class="list_li">triggerli>
            <li class="list_li">hoverli>
            <li class="list_li">clickli>
            <li class="list_li">focusli>
        ul>
    dd>
    <dt class="list_dt">
        <span class="_after">span>
        <p>AJAXp>
        <i class="list_dt_icon">i>
    dt>
    <dd class="list_dd">
        <ul>
            <li class="list_li">$.ajaxli>
            <li class="list_li">$.getli>
            <li class="list_li">$.getJSONli>
            <li class="list_li">$.getScriptli>
            <li class="list_li">$.postli>
        ul>
    dd>
    <dt class="list_dt">
        <span class="_after">span>
        <p>效果p>
        <i class="list_dt_icon">i>
    dt>
    <dd class="list_dd">
        <ul>
            <li class="list_li">showli>
            <li class="list_li">hideli>
            <li class="list_li">toggleli>
            <li class="list_li">slideDownli>
            <li class="list_li">slideUpli>
            <li class="list_li">slideToggleli>
            <li class="list_li">fadeInli>
            <li class="list_li">fadeOutli>
            <li class="list_li">fadeToli>
            <li class="list_li">fadeToggleli>
            <li class="list_li">stopli>
        ul>
    dd>
dl>

<script type="text/javascript" src="js/jquery.min.js">script>
<script type="text/javascript">

$(".list_dt").on("click",function () {
    $('.list_dd').stop();
    $(this).siblings("dt").removeAttr("id");
    if($(this).attr("id")=="open"){
        $(this).removeAttr("id").siblings("dd").slideUp();
    }else{
        $(this).attr("id","open").next().slideDown().siblings("dd").slideUp();
    }
});

script>
center>
body>
html>

css:

@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
}
.list_dt{
    background: #333;
    color: white;
    width: 120px;
    padding: 0 40px 0 20px;
    height: 34px;
    line-height: 34px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    border-bottom: 1px solid #464646;
}
.list_dt:hover{
    background: #222;
}
.list_dt:hover ._after{
    display: block;
    width: 3px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #4285F4;
}
#open{
    background: #222;
}
#open ._after{
    display: block;
    width: 3px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #4285F4;
}
.list_dt_icon{
    position: absolute;
    right: 10px;
    top: 9px;
    display: block;
    width: 16px;
    height: 16px;
    background: url("../images/off.png") no-repeat;
}
#open .list_dt_icon{
    background: url("../images/open.png") no-repeat;
}
.list_dd{
    display: none;
}
.list_li{
    background: #4e4e4e;
    list-style-type: none;
    color: white;
    width: 120px;
    padding: 0 30px;
    height: 34px;
    line-height: 34px;
    cursor: pointer;
    border-bottom: 1px solid #6b6b6b;
}
.list_li:hover{
    background: #4285F4;
}

 

转载于:https://www.cnblogs.com/liuyanxia/p/8578260.html

你可能感兴趣的:(左侧手风琴下拉菜单导航(网页常用功能))