javascript - 怎样快速写出二级菜单

Question

        <p class="nav">
            <ul class="ul1">
                <li class="first">
                    <img src="img/ico6.png"/><span>所有商品分类</span>                    
                </li>
                <li class="ul1-second"><img src="img/ul1-ico8.jpg"/><span>手机数码</span></li>
                <li class="ul1-third"><img src="img/ul1-ico3.jpg"/><span>电脑办公</span></li>
                <li class="ul1-fourth"><img src="img/ul1-ico7.jpg" alt="" /><span>食品/酒饮/生鲜/特产</span></li>
                <li class="ul1-fifth"><img src="img/ul1-ico1.jpg"/><span>服装/鞋帽/箱包</span></li>
                <li class="ul1-sixth"><img src="img/ul1-ico2.jpg"/><span>母婴玩具</span></li>
                <li class="ul1-seventh"><img src="img/ul1-ico5.jpg"/><span>家居/生活/服务</span></li>
                <li class="ul1-ninth"><img src="img/ul1-ico4.jpg"/><span>个护美妆/清洁用品</span></li>
                <li class="last-child"><img src="img/ul1-ico6.jpg"/><span>家用电器</span></li>
                    <!--二级子菜单-->
                <!--<p class="phone-digital">
                    <table border="1px" cellspacing="0" cellpadding="0">
                        <tr><th><a href="#">手机数码</a></th></tr>
                        <tr>
                            <td><a href="#">手机通讯</a></td>
                            <td><a href="#">iPhone</a></td>
                            <td><a href="#">三星</a></td>
                            <td><a href="#">小米</a></td>
                            <td><a href="#">魅族</a></td>
                            <td><a href="#">华为</a></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><a href="#">诺基亚</a></td>
                            <td><a href="#">联想</a></td>
                            <td><a href="#">HTC</a></td>
                            <td><a href="#">中兴</a></td>
                            <td><a href="#">索尼</a></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><a href="#">乐视</a></td>
                            <td><a href="#">其他</a></td>
                            <td><a href="#">微软</a></td>
                            <td><a href="#">儿童定位手表</a></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><a href="#">乐视</a></td>
                            <td><a href="#">其他</a></td>
                            <td><a href="#">微软</a></td>
                            <td><a href="#">儿童定位手表</a></td>
                        </tr>
                        <tr>
                            <td>摄影摄像 ></td>
                            <td><a href="#">单反相机</a></td>
                        </tr>
                        <tr>
                            <td>智能设备 ></td>
                            <td><a href="#">健康监测</a></td>
                            <td><a href="#">智能手表</a></td>
                        </tr>
                    </table>
                </p>-->
            </ul>
            

            本想用display：none，然后通过js控制其隐藏或者出现，但是才写一个table就发现这样写下去累成狗，求大神指点，万分感谢

Answer 1

几十行代码不至于累成狗吧，算你10个一级菜单也才几百行。

当然，能用几十行代码解决的不要写几百行。不过要做的准备工作更多

如果你想写8个二级菜单，就直接复制粘贴算了，也就一个打字的时间

如果想代码简洁一些，可以写一个table，根据数据动态的生成二级菜单

Answer 2

你可以用JS去动态添加，数据可以读取一个json数组，然后添加完后，浏览器打开，查看源代码，复制菜单代码，然后再粘贴到你的html上，就是动态生成，然后最后静态呈现了