jQuery each使用

最新推荐文章于 2024-08-22 14:32:34 发布

weixin_30773135

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量64

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cart55free99/archive/2013/05/29/3107024.html

版权

            .MenuTitle {
                width: 30px;
                height: 120px;
                font-size: 20px;
                padding-left: 10px;
                padding-top: 5px;
                /*background: url(image/index_x.png) repeat-x 0px -673px;*/
                background-color:#FFCCDD;
                border: #ffbc66 1px solid;
            }
            .MenuContent {
                width: 108px;
                font-size: 16px;
                padding: 20px 10px 20px 40px;
                border: #ffbc66 1px solid;
            }

<div class="MenuPanel">
    <div class="MenuTitle" style="float:left;">
        第一菜单
    </div>
    <div class="MenuContent" style="float:right;">
        <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
        <br />
        <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
        <br />
        <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
        <br />
        <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
        <br />
        <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
    </div>
    <div style="clear:both;"></div>
</div>

jQuery

$(document).ready(function() {
    $(".MenuPanel").each(function() {
        $(this).children(".MenuContent").hide();
    });

    $(".MenuTitle").each(function() {
        $(this).click(function() {

            if ($(this).parents(".MenuPanel").children(".MenuContent").css("display") != "none") {
                $(this).parents(".MenuPanel").children(".MenuContent").hide("fast");
            } else {
                $(".MenuPanel").each(function() {
                    $(this).children(".MenuContent").hide();
                });
                $(this).parents(".MenuPanel").children(".MenuContent").show("fast");
            }
        });

    });

});