使用二级列表时选中隐藏

<ul class="mui-table-view mui-table-view-chevron">  

                    <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">产品</a>  
                        <ul class="mui-table-view mui-table-view-chevron">  
                            <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">iOS</a>  
                            </li>  
                            <li class="mui-table-view-cell" onclick=""><a class="mui-navigate-right" href="#">Android</a>  
                            </li>  
                            <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">HTML5</a>  
                            </li>  
                        </ul>  
                    </li>  
</ul>

示例上面的二级列表，我想实现我点击ios这个li的时候，展开的三个li关闭要如何实现呢？
用jq调取class 然后调用.hide()可以实现，但是不能再次展开了。
我希望能在点击上面的产品的时候还能再次展开三个li