Question

我想切换侧边栏选项，即如果我点击Location，则应显示其子项。如果我点击Device，则应显示其选项。

<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>

Answer 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();
    })
});

演示：Fiddle

边栏切换关闭并打开Bootstrap

1 个答案: