JSFiddle - React, Tailwind, and code Playground

by jquery2005

HTML

<div id="menu">
    <div class="has_children">
        <span>第 1 章-认识 jQuery</span>
        <a>1.1-JavaScript 和 JavaScript 库</a>
        <a>1.2-加入 jQuery</a>
        <a>1.3-编写简单 jQuery 代码</a>
        <a>1.4-jQuery 对象和DOM对象</a>
        <a>1.5-解决 jQuery 和其它库的冲突</a>
        <a>1.6-jQuery 开发工具和插件</a>
        <a>1.7-小结</a>
    </div>
    <div class="has_children">
        <span>第 2 章-jQuery 选择器</span>
        <a>2.1-jQuery 选择器是什么</a>
        <a>2.2-jQuery 选择器的优势</a>
        <a>2.3-jQuery 选择器</a>
        <a>2.4-应用 jQuery 改写示例</a>
        <a>2.5-选择器中的一些注意事项</a>
        <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
        <a>2.7-还有其它选择器么？</a>
        <a>2.8-小结</a>
    </div>
    <div class="has_children">
        <span>第 3 章-jQuery 中的 DOM 操作</span>
        <a>3.1-DOM 操作的分类</a>
        <a>3.2-jQuery 中的 DOM 操作</a>
        <a>3.3-案例研究——某网站超链接和图片提示效果</a>
        <a>3.4-小结</a>
    </div>
</div>

CSS

#menu { width: 300px; }
.has_children{ background: #555;color: #fff;cursor: pointer; }
.highlight{ color: #fff;background: green; }
div{padding: 0; margin: 10px 0;}
div a{background: #888;display: none;float:left;width:300px;}

JavaScript

$(function(){
    $(".has_children").click(function(){
    $(this).addClass("highlight").children("a").show().end().siblings().
                removeClass("highlight").children("a").hide();
    });
});