在移动视图中一次切换一个 div

Question

我有一个仅在移动设备上显示为手风琴菜单的页脚。因此，ul 元素必须在加载时仅在移动设备上隐藏。一次只能打开一个部分，如果已经打开一个部分，则会在触发另一个部分时关闭（例如：http://jsfiddle.net/auUxk/）。我有下面的代码，但它目前正在全局触发 div。

<div class="col-md-3 col-sm-4">
    <div class="panel">
        <div class="panel-heading">
            <h4 class="panel-title">About us</h4>
        </div>
        <ul>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
        </ul>
    </div>
</div>
<div class="col-md-3 col-sm-4">
    <div class="panel">
        <div class="panel-heading">
            <h4 class="panel-title">Header</h4>
        </div>
        <ul>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
        </ul>
    </div>
</div>

媒体查询

@media screen and (max-device-width: 480px) {
  ul li{
    display:none;
  }
}

jQuery

$(document).ready(function($) {
    $(".panel-title").click(function() {
        $("li").slideToggle(500); 
    });
});

JSFIDDLE:http://jsfiddle.net/auUxk/1115/

Answer 1

为什么你不只使用 css？ 使用具有相同名称的单选按钮。

JSFIDDLE：http://jsfiddle.net/0Ldpk0vy

更新（带动画）JSFIDDLE：http://jsfiddle.net/0Ldpk0vy/1/

ul {
  display: none;
}

[type="radio"] {
  display: none;
}

[type="radio"]:checked + ul {
  display: block;
}