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

你几乎就在那里，我使用了一个位置绝对div并且位于顶部：0px;在菜单上.click func我使用Jquery动画让它向下滑动我希望这是你正在寻找的

jquery示例

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

fiddle

Answer 2

你必须放下slideToggle（1200）并设置左边距：50px为#mmenu那样

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。

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

3 个答案: