下拉菜单（垂直）

最新推荐文章于 2021-05-31 05:31:01 发布

假装是仙女

最新推荐文章于 2021-05-31 05:31:01 发布

阅读量1.4k

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/smallMirror_/article/details/78350084

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>