下拉菜单（垂直）

来源：互联网发布：ubuntu安装jdk eclipse 编辑：程序博客网时间：2024/06/13 04:04

css

<style>            .icon{                width: 15px;                height: 15px;            }            .one{                background-color: burlywood;            }            .two{                display: block;            }            .a{                list-style: none;            }</style>

html

<div>            <ul class="a">                <li>                    <a class="one">                        <span>一级菜单</span>                        <input type="hidden" id="statu" value="0" />                        <img  class="icon" src="img/san1.png"/>                    </a>                        <div>                        <ul>                            <li>二级菜单</li>                            <li>二级菜单</li>                        </ul>                    </div>                </li>                <li>                    <a class="one">                        <span>一级菜单</span>                        <input type="hidden" id="statu" value="0" />                        <img  class="icon" src="img/san1.png"/>                    </a>                        <div>                        <ul>                            <li>二级菜单</li>                            <li>二级菜单</li>                        </ul>                    </div>                </li>                <li>                    <a class="one">                        <span>一级菜单</span>                        <input type="hidden" id="statu" value="0" />                        <img  class="icon" src="img/san1.png"/>                    </a>                        <div>                        <ul>                            <li>二级菜单</li>                            <li>二级菜单</li>                        </ul>                    </div>                </li>            </ul>        </div>

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $(".one").click(function(){                var flag=$(this).find('#statu').val();            if(flag==0){                $(this).parent().find('div').slideUp();                $(this).parent().find('.icon').attr("src","img/san.png");                var flag=$(this).find('#statu').val("1");            }else{                $(this).parent().find('div').slideDown("");                $(this).parent().find('.icon').attr("src","img/san1.png");                var flag=$(this).find('#statu').val("0");                }            });</script>

运行结果
这里写图片描述

阅读全文

0 0