Jquery 侧边栏切换关闭和打开引导

我想切换侧边栏选项，即如果单击

位置

，应显示其子项。如果单击设备，则应显示其选项

<div class="span3">
    <li>
        <a href="#location">Location</a>
        <ul class="nav">
            <li><a href="#region">Region</a></li>
            <li><a href="#country">Country</a></li>
            <li><a href="#state">State</a></li>
        </ul>
    </li>
    <li>
        <a href="#device">Device</a>
        <ul class="nav">
            <li><a href="#gateway-unit">Gateway Unit</a></li>
            <li><a href="#modbus-unit">Modbus Unit</a></li>
            <li><a href="#meter-unit">Meter Unit</a></li>
        </ul>
    </li>
    <li><a href="#user">Software User</a></li>
    <li><a href="#global-parameters">Global Parameters</a></li>
</div>

试试看

---

演示：

您有没有尝试过。。。。查看点击事件手柄，还应具有切换功能。但是为什么div应该被ul取代呢？我试过你的[jsfiddle链接]（jsfiddle.net/arunpjohny/xjUAK/1）。它确实可以工作，但当我点击它的子项时，它就关闭了。为什么？

<ul class="span3 navigation">
    <li>
        <a href="#location">Location</a>
        <ul class="nav">
            <li><a href="#region">Region</a></li>
            <li><a href="#country">Country</a></li>
            <li><a href="#state">State</a></li>
        </ul>
    </li>
    <li>
        <a href="#device">Device</a>
        <ul class="nav">
            <li><a href="#gateway-unit">Gateway Unit</a></li>
            <li><a href="#modbus-unit">Modbus Unit</a></li>
            <li><a href="#meter-unit">Meter Unit</a></li>
        </ul>
    </li>
    <li><a href="#user">Software User</a></li>
    <li><a href="#global-parameters">Global Parameters</a></li>
</ul>

jQuery(function ($) {
    var $uls = $('.navigation ul').hide();
    $('.navigation li:has(ul) > a').click(function(){
        var $ul = $(this).next('ul').show();
        $uls.not($ul).hide();
    })
});