Question

我正在尝试使用jquery切换导航容器/ div。

我有以下代码

的style.css

#site-navigation {
    position: fixed;
    bottom: 45px;
    left: 30px;
    right: 30px;
    top: 50px;
}
.main-nav-toggle {
    display: none;
    position: fixed;
    bottom:0;
    right:0;
    z-index: 100;
}
.main-nav-toggle .icon {
    background: gray;
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 5px 10px;;
    line-height: 1;
    display: inline-block;
    border: 2px solid black;
    border-radius: 5px;
}

和home.html

<div id="site-nav-container">
    <div class="main-nav-toggle">
        <div class="toggle icon"><i class="fa fa-bars"></i></div>
        <a href="#site-navigation" class="screen-reader-text">primary-menu</a>
    </div>
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-test-container">
            <ul id="primary-menu" class="menu">
                <li id="menu-item-1776" class="1776">
                    <a href="#">Level 1</a>
                    <ul class="sub-menu">
                        <li id="menu-item-1778" class="item-1778">
                            <a href="#">Level 2a</a>
                            <ul class="sub-menu">
                                <li id="menu-item-1780" class="item-1780">
                                    <a href="#">Level 3a</a>
                                </li>
                                <li id="menu-item-1779" class="item-1779">
                                    <a href="#">Level 3b</a>
                                </li>
                            </ul>
                        </li>
                        <li id="menu-item-1777" class="item-1777">
                            <a href="#">Level 2b</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>                        
     </nav> <!--#site-navigation-->
</div>

主toggle.js

jQuery(document).ready(function($){
    $(".main-nav-toggle .icon").click(function(){
        $("#site-navigation").animate({height: 'toggle'}, 1000, function(){
            $('.main-nav-toggle').toggleClass('active');
        });
        return false;
    });
});

几乎按预期工作。

它应该起作用所以容器从下往上会更高。但仍然从顶部停止50px

img link：what it should look like

这是我的第一个jquery代码

请好好

Answer 1

以下是我认为你想要的工作人员：http://plnkr.co/edit/ZZyokGfziUD0jgVEGIXf

基本上，当菜单打开时，您需要移动偏移量以使其位于底部。

(function($){
  var $menu = $('.menu');
  var $button = $('.button');

  var openMenu = function(){
    $menu.data('open', true);

    $menu.animate({
      height: '400px',
      bottom: '50px'
    });
  };

  var closeMenu = function(){
    $menu.data('open', false);
    $menu.animate({
      height: 0,
      bottom: '50px'
    });
  }

  var animateMenu = function(){
    if($menu.data('open')){
      closeMenu();
    } else{
      openMenu();
    }
  };

  $button.on('click', animateMenu);
})(jQuery);

Answer 2

或者，作为替代方案，您可以使用方便的transition属性让CSS处理所有内容：这让我感觉更好，因为浏览器不会在计时器上接受外部指令，而是以最佳方式计算步骤本身。

（我还保留了你的切换按钮，在动画之后切换＆＃34; active＆＃34;类，但是你的CSS中没有规则）

https://jsfiddle.net/svArtist/k293f6bj/

＆＃13;

jQuery(document).ready(function($){
    $(".main-nav-toggle .icon").click(function(){
        $("#site-navigation").toggleClass("open");
        setTimeout(function(){
            $('.main-nav-toggle').toggleClass('active');
        }, 1000);
        return false;
    });
});

＆＃13;

#site-navigation {
    position: fixed;
    bottom: 10%;
    left: 10%;
    right: 10%;
    background-color:#eee;
    padding:10px;
    border:1px solid #aaa;
    box-sizing:border-box;
    height:0%;
    opacity:0;
    overflow:hidden;
    transition: height 1s, opacity 1s;
}
#site-navigation.open {
  height: 80%;
  opacity:1;
}
.main-nav-toggle {
    position: fixed;
    bottom:0;
    right:0;
    z-index: 100;
}
.main-nav-toggle .icon {
    background: gray;
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 5px 10px;;
    line-height: 1;
    display: inline-block;
    border: 2px solid black;
    border-radius: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="site-nav-container">
    <div class="main-nav-toggle">
        <div class="toggle icon"><i class="fa fa-bars">TOGGLEME</i></div>
        <a href="#site-navigation" class="screen-reader-text">primary-menu</a>
    </div>
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-test-container">
            <ul id="primary-menu" class="menu">
                <li id="menu-item-1776" class="1776">
                    <a href="#">Level 1</a>
                    <ul class="sub-menu">
                        <li id="menu-item-1778" class="item-1778">
                            <a href="#">Level 2a</a>
                            <ul class="sub-menu">
                                <li id="menu-item-1780" class="item-1780">
                                    <a href="#">Level 3a</a>
                                </li>
                                <li id="menu-item-1779" class="item-1779">
                                    <a href="#">Level 3b</a>
                                </li>
                            </ul>
                        </li>
                        <li id="menu-item-1777" class="item-1777">
                            <a href="#">Level 2b</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>                        
     </nav> <!--#site-navigation-->
</div>

＆＃13;

Answer 3

感谢Ben Philipp找到解决方案和其他时间

[的jsfiddle] [1]

https://jsfiddle.net/BugiBH/uk1j9cdw/

<div id="site-nav-container">
    <div class="main-nav-toggle">
        <div class="toggle icon"><i class="fa fa-bars">TOGGLEME</i></div>
        <a href="#site-navigation" class="screen-reader-text">primary-menu</a>
    </div>
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-test-container">
            <ul id="primary-menu" class="menu">
                <li id="menu-item-1776" class="1776">
                    <a href="#">Level 1</a>
                    <ul class="sub-menu">
                        <li id="menu-item-1778" class="item-1778">
                            <a href="#">Level 2a</a>
                            <ul class="sub-menu">
                                <li id="menu-item-1780" class="item-1780">
                                    <a href="#">Level 3a</a>
                                </li>
                                <li id="menu-item-1779" class="item-1779">
                                    <a href="#">Level 3b</a>
                                </li>
                            </ul>
                        </li>
                        <li id="menu-item-1777" class="item-1777">
                            <a href="#">Level 2b</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>                        
     </nav> <!--#site-navigation-->
</div>

#site-navigation {
    position: fixed;
    bottom: 10%;
    left: 10%;
    right: 10%;
    background-color:#eee;
    padding:0px;
    display : none;
    box-sizing:border-box;
    height:80%;
    overflow:hidden;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

.main-nav-toggle {
    position: fixed;
    bottom:0;
    right:0;
    z-index: 100;
}
.main-nav-toggle .icon {
    background: gray;
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 5px 10px;;
    line-height: 1;
    display: inline-block;
    border: 2px solid black;
    border-radius: 5px;
}



jQuery(document).ready(function($){
    $(".main-nav-toggle .icon").click(function(){
        $("#site-navigation").animate({height: 'toggle'}, function(){
            $('.main-nav-toggle').toggleClass('active');
        });
        // Optional return false to avoid the page "jumping" when clicked
        return false;
    });
});

jquery animate height，＆＃34;从下到上＆＃34 ;,在top之前停止

3 个答案: