打开菜单时如何垂直扩展网页的主体答案

【问题标题】：How to expand vertically web's body when open menu打开菜单时如何垂直扩展网页的主体
【发布时间】：2015-11-26 21:51:48
【问题描述】：

我正在 JQuery 中构建一个可垂直扩展的小菜单，我需要一些帮助。

我的主要问题是，当我点击菜单展开它时，网络没有展开，所以我不能点击最后一个菜单的链接，因为它不在页面内。所以我想当点击发生时我需要以某种方式扩展文档的正文，但我不知道如何实现。

那么，如何在打开菜单时垂直展开“canvas/body/etc...”？

我的第二个问题是：当点击链接并从页面更改时，我怎样才能做到菜单不隐藏？

谢谢！

我的 Jquery：

$(function() {
      var visibleFashion = false;

      $('#menu-fashion').css({'display':'none'});

      //FASHION
      $('#fbtn').click(function() {

        if (visibleFashion) {
          $('#menu-fashion').css({'display':'none'});
          visibleFashion = false;
          return;
        }

        $('#menu-fashion').css({'display':'block'});
        visibleFashion = true;


      });


      $('#menu-fashion').click(function() {
        $(this).css({'display':'none'});
        visibleFashion = false;
      });
});

这是我关于 HTML/PHP 的部分：

<!--Class menus-->
                <div id="fbtn" style="margin-top:10px; cursor:pointer;">Fashion</div>
                <?php wp_nav_menu(array('theme_location' => 'secondary', 'menu_class' => 'nav-menu', 'container_id' => 'top-right-menu-fashion', 'fallback_cb' => false)); ?>

CSS：

#top-right-menu-fashion {
    margin-left: 10px;
}
.menu-fashion{
        display: none;  
    }

【问题讨论】：

对不起，我忘了！现在已编辑。

标签： javascript jquery html css menu

【解决方案1】：

您尝试做的事情的逻辑是这样的：DEMO

$('#menu').height(0);

var menuOpen=false;
$('a').click(function(e){
    if(!menuOpen){
        $('#menu').animate({
            height:100
        },200);
        menuOpen=true;
    }
    else{
        $('#menu').animate({
            height:0
        },200);
        menuOpen=false;
    }
    e.preventDefault();
    return false;
});
$('section').not('a').click(function(e){
    if(menuOpen){
        $('#menu').animate({
            height:0
        },200);
        menuOpen=false;
        e.preventDefault();
        return false;
    }
});

现在您只需将此逻辑插入到您的项目中，就可以开始了。

【讨论】：