SOURCE

$(".level1 > a").click(function(){
    $(this).addClass("current") //给当前元素添加样式
    .next().show()              //下一个元素显示
    //父元素的同辈元素移除样式，并隐藏下一代元素
    .parent().siblings().children("a").removeClass("current")
    .next().hide();
    return false;
});

<div class="box">
        <ul class="menu">
            <li class="level1">
                <a href="#one">衬衫</a>
                <ul class="level2">
                    <li><a href="#">短袖衬衫</a></li>
                    <li><a href="#">长袖衬衫</a></li>
                    <li><a href="#">短袖T恤</a></li>
                    <li><a href="#">长袖T恤</a></li>
                </ul>
            </li>
            <li class="level1">
                <a href="#one">衬衫</a>
                <ul class="level2">
                    <li><a href="#">短袖衬衫</a></li>
                    <li><a href="#">长袖衬衫</a></li>
                    <li><a href="#">短袖T恤</a></li>
                    <li><a href="#">长袖T恤</a></li>
                </ul>
            </li>
            <li class="level1">
                <a href="#one">衬衫</a>
                <ul class="level2">
                    <li><a href="#">短袖衬衫</a></li>
                    <li><a href="#">长袖衬衫</a></li>
                    <li><a href="#">短袖T恤</a></li>
                    <li><a href="#">长袖T恤</a></li>
                </ul>
            </li>
        </ul>
    </div>

/* 初始化样式 */
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;font-size: 12px;}

.menu{border: 1px solid #111;width: 120px;}
.menu>li{border-bottom: 1px dotted #333;}
.menu>li:last-child{border-bottom: none;}
.menu li a{display: block;padding: 4px;}
.level2{display: none;}
.current{background: red;}