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

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

1 个答案: