Question

我正在尝试建立一个非画布的推脚这个想法是，当从页脚菜单中选择不同的选项时，页面的其余部分会被向上推以显示页脚内容
有一个滑动页脚菜单here的教程，但由于它将[页脚]内容滑到页面的顶部（如顶层），这不是我想要的。
/> 通过使用bootstrap“accordion”，我设法将内容下拉到页面下方，但由于这不属于视野（浏览器窗口），我担心有些访问者会找不到它。

这是FIDDLE

<div class="pushDown">Please scroll down to bottom</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading col-xs-6">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1
    </a>
</div>
<div class="panel-heading col-xs-6">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
      Collapsible Group Item #2
    </a>
</div>
</div>
<div class="panel panel-default">
<div id="collapseOne" class="panel-collapse collapse">
  <div class="panel-body">
    CONTENT 1
  </div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body">
    CONTENT 2
  </div>
</div>
</div>
</div>

有没有让面板推高其余内容而不是下降？

选项2 - 在这里我调整了Christopher Yee's plugin以满足我的需要，但我只能使用一个按钮

PushFooter

$(function() {
var pushy = $('.pushy'), //menu css class
    body = $('body'),
    container = $('#container'), //container css class
    push = $('.push'), //css class to add pushy capability
    siteOverlay = $('.site-overlay'), //site overlay
    pushyClass = "pushy-left pushy-open", //menu position & menu open class
    pushyActiveClass = "pushy-active", //css class to toggle site overlay
    containerClass = "container-push", //container open class
    pushClass = "push-push", //css class to add pushy capability
    menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
    menuSpeed = 300, //jQuery fallback menu speed
    menuWidth = pushy.width() + "px"; //jQuery fallback menu width

function togglePushy(){
    body.toggleClass(pushyActiveClass); //toggle site overlay
    pushy.toggleClass(pushyClass);
    container.toggleClass(containerClass);
    push.toggleClass(pushClass); //css class to add pushy capability
}

如果我使用类名.pushy-left2 .menu-btn2 .pushy2等，我将如何编辑JS。

Answer 1

尝试将#id粘贴到页脚的内容区域，并在手风琴的触发器中建立链接。

点击该链接后，将其链接到内容区域＆＃39; a href =＆＃34; mysite.com/home#article"＆＃39;

因此它将页面置于该信息的中心

离帆布推脚

1 个答案: