div下拉菜单中的文本一起在jquery下拉菜单中

Question

我正在尝试在使用此示例的站点中实现一个简单的 jquery 下拉菜单 - http://bhoover.com/simple-jquery-mobile-menu/

我已成功完成此操作，但是我想更改单击切换按钮时下拉内容的显示方式，如果您查看上面链接中的示例演示，您会看到单击下拉菜单时显示文本内容固定，div 只是展开以显示文本。然而，我想让文本和应用了背景颜色的 div 一起下拉，我知道这与我的定位有关，但不确定我需要做什么。任何帮助将不胜感激，谢谢。

以下是我当前的代码：

HTML：

<div id="toggle-bar">
    <h2 class="alignCenter"><a class="mtoggle" href="#">More</a></h2>
</div>

<article class="a-all moreArticle">
  <div id="mobile">
    <div id="mmenu">

      <section class="a5 alignCenter menuDropPadding">
        <h2><a href="">Header</a></h2>
        <h2><a href="">Header</a></h2>
      </section>

      <section class="a6 alignCenter menuDropPadding">
        <h2><a href="">Header</a></h2>
        <h2><a href="">Header</a></h2>
        <h2><a href="">Header</a></h2>
      </section>

      <section class="a7-a8 alignCenter menuDropPadding">
        <h2><a href="">Header</a></h2>
        <h2><a href="">Header</a></h2>
        <h2><a href="">Header</a></h2>
      </section>

      <section class="a9-a10 alignCenter menuDropPadding"> 
        <h2><a href="">Header</a></h2>
        <h2><a href="">Header</a></h2>
        <h2><a href="">Header</a></h2>
      </section>

      <section class="a11 alignCenter menuDropPadding">
        <h2>Header</h2>
        <h2>Header</h2>
      </section>
    </div>
  </div>
</article>

JS：

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $("#mmenu").hide();
    $(".mtoggle").click(function() {
      $("#mmenu").slideToggle(500);
    });
  });
</script>

Answer 1

你必须像这样为 #mmenu 设置 slideToggle(1200) 并设置 margin left:50px

Answer 2

你快到了，我使用了绝对位置 div 并定位到顶部：0px;在菜单上的 .click func 我使用 Jquery animate 让它向下滑动我希望这就是你要找的

jquery 示例

$(function() {
    $(".menuclick").click(function(){
        if($(".menuslide").css("top") == "60px"){
            $(".menuslide").animate({"top" : -700}, "slow");
        }else{
            $(".menuslide").animate({"top" : 70}, "slow");
        }
    });
});

fiddle

Answer 3

我认为这符合您的描述。通过将菜单设置为top: -300px 并让.container 使用overflow: hidden 隐藏它，可以隐藏菜单。然后单击.toggle-bar 为菜单的top 设置动画，同时为.container 的高度设置动画。

HTML：

<div class="container">
    <div class="toggle-bar">Click me!</div>
    <div class="menu">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</div>

CSS：

.container {
    height: 30px;
    overflow: hidden;
    position:relative;
    width: 100%;
}
.toggle-bar {
    background-color: #ddd;
    height: 30px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 2;
}
.menu {
    background-color: #eee;
    left: 0;
    position: absolute;
    top: -300px;
    width: 100%;
}

JS：

var menuH = $('.menu').height();
$('.menu').css('top', -menuH);

var animating = false;

$('.toggle-bar').on('click', function () {
    if (!animating) {
        animating = true;
        if ($('.menu').css('top') == (-menuH) + 'px') {
            $('.container').stop().animate({'height': menuH + 30});
            $('.menu').stop().animate({'top': 30}, 500, function () {
                animating = false;
            });
        } else {
            $('.container').stop().animate({'height': 30});
            $('.menu').stop().animate({'top': -menuH}, 500, function () {
                animating = false;
            });
        }
    }
});

这是fiddle。