在jquery下拉菜单上，div内的文本一起下拉

我试图在一个网站上实现一个简单的jquery下拉菜单，从这个例子可以看出-

我已经成功地做到了这一点，但是我想改变点击切换时下拉内容的显示方式，如果您查看上面链接中的示例演示，您会看到点击时下拉菜单显示文本内容已修复，div仅扩展以显示文本。然而，我希望文本和具有背景颜色的div一起下拉，我知道这与我的定位有关，但不确定我需要做什么。非常感谢您的帮助，谢谢

以下是我目前的代码：

HTML:

JS:

---

你就快到了，我用了一个绝对位置div，把它放在顶部：0px；在菜单上单击func，我使用Jquery动画使其向下滑动，希望这就是您要查找的

jquery示例

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

---

你必须把slideToggle1200和设置左边距：50像素的mmenu像这样

我认为这符合你所描述的。通过将菜单设置为top:-300px并使容器使用overflow:hidden将其隐藏，可以隐藏菜单。然后单击.toggle栏设置菜单顶部的动画，同时也设置.container高度的动画

HTML:

JS:

---

这是一个。

你就快到了，我使用了位置绝对div和位置top:0px；在菜单上。单击func我使用Jquery动画使其向下滑动，我希望这就是您要寻找的。这几乎是我答案的副本，但您在Jquery动画中投入了更多的时间。@Stijnbarnards它遵循相同的原则，是的。我的网页还有一个额外的优点，就是可以放在网页的任何地方，因为它不会干扰上面的内容流。因此，它可以被放置在页面顶部的另一个横幅之下，或者甚至在页面的中间，如果需要的话，可以显示更多的内容。如果用户快速点击工具栏，我的也不会停止工作。@StijnBernards实际上我只是再次查看了你的答案，它的行为与给出的示例完全不同。您的页面不会向下推页面内容。也许这就是OP想要的，但也许不是。

<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>

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

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

<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>

.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%;
}

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;
            });
        }
    }
});