小编use*_*331的帖子

所以我试图在我的导航中实现画布外菜单。我只是无法通过http://getbootstrap.com/examples/offcanvas/给出的代码完全弄清楚这一点

当屏幕宽度低于 991px 时，单击菜单（或汉堡包）图标时，顶部链接应出现在垂直列表中。我希望垂直列表能够在内容上滑动，以便菜单图标在某种程度上仍然可见。所以不是推动效应。

我所描述的一个很好的例子是此网站上的“Slide In On Top”过渡http://tympanus.net/Development/SidebarTransitions/

这是我的导航栏的 bootply。http://www.bootply.com/r8RRCqHo9J

导航

<header class="navbar navbar-inverse navbar-static-top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="http://placehold.it/234x84&text=LOGO" alt="..." style="padding:18px 5px"></a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-inverse">

<li class="active">
<a href="#">Home</a>
</li>

<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 1</a>
<ul class="dropdown-menu">
<li class="drop-down"><a href="#">Sub-Item 1</a></li>
<li class="drop-down"><a href="#">Sub-Item 2</a></li>
<li class="drop-down"><a href="#">Sub-Item …

我有一个页面,有hide/show的多个div.最初在页面加载时,div将被隐藏,但是当单击"Read More"按钮时,将显示该隐藏的div.现在这些div具有相似的ID.我想知道是否有(更短的)方法来编写代码,而不是指定每个ID.我可以使用*选择器应用于所有类似于('#* - box')格式的ID吗？

jQuery的

$(document).ready( function () {

function hidesections() {
    $('#bob-box .summary').hide('medium');
    $('#tom-box .summary').hide('medium');
    $('#bill-box .summary').hide('medium');
    $('#mike-box .summary').hide('medium');
};

function reset() {
    $('#bob-read').html('<img src="images/more-arrow.png"> Read More <img src="images/more-arrow.png">');
    $('#tom-read').html('<img src="images/more-arrow.png"> Read More <img src="images/more-arrow.png">');
    $('#bill-read').html('<img src="images/more-arrow.png"> Read More <img src="images/more-arrow.png">');
    $('#mike-read').html('<img src="images/more-arrow.png"> Read More <img src="images/more-arrow.png">');
};



$('#bob-read').toggle(
    function () {
        hidesections();
        $('#bob-box .summary').show('medium');
         reset();
        $('#bob-read').html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
    }, function () {
        if ( $('#bob-box .summary').css('display') == 'block')
        {
            hidesections();
            reset();
        }
        else {
            hidesections(); …