css

<style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            cursor: pointer;
            font-size: 20px;
        }

        ul {
            margin-left: 20px;
            display: none;
            /* height: 0; */
        }
        ul.active {
            display: block;
        }

        ul,
        li {
            color: #999999;
            list-style: none;
        }
    </style>

html

<p>html</p>
    <ul class="active">
        <li>html1</li>
        <li>html2</li>
        <li>html3</li>
    </ul>
    <p>css</p>
    <ul>
        <li>css1</li>
        <li>css2</li>
        <li>css3</li>
    </ul>
    <p>js</p>
    <ul>
        <li>js1</li>
        <li>js2</li>
        <li>js3</li>
    </ul>

js

$("p").each(function(index,item){
            $('p').eq(index).click(function(){
                $("p").eq(index).next().toggleClass("active");
            })
        })

（注：别忘了引用jQuery）