Question

我有一个手风琴菜单：https://jsfiddle.net/wfr57s57/

这是JQuery代码

$(".menu-item").click(function(e) {
    var allContents = $(".menu-content");
    e.preventDefault();
        if(allContents.hasClass("activeMenu")) {
            allContents.removeClass("activeMenu");
        }
    var content = $(this).next().find(".menu-content");
    content.toggleClass("activeMenu");
});

它工作正常，但我想要，当一个内容打开时，我点击另一个菜单项，内容在之前滑落时向上滑动。

    <section>
    <div class="menu-item">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                   Title
                </div>
            </div>
        </div>  
    </div>
    <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="menu-content">
                        <div class="inner">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                            </div>
                    </div>
                </div>
            </div>
        </div>
</section>

    <section>
    <div class="menu-item">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                   Title
                </div>
            </div>
        </div>  
    </div>
    <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="menu-content">
                        <div class="inner">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                            </div>
                    </div>
                </div>
            </div>
        </div>
</section>

此外，我不知道这是否是最佳解决方案 - 您是否有提示如何做得更好？

谢谢：）

Answer 1

尝试使用高度而不是负边距来隐藏/显示

 .inner {
    height: 0;
}

 .activeMenu { //showContent
    min-height:200px;

Answer 2

为什么不尝试使用jquery slideUp和slideDown？

$(".menu-item").click(function() {
  if ($(this).next('.menu-outer').hasClass('opened')) {
    $(this).next('.menu-outer').slideUp().removeClass('opened')
  } else {
    $('.container.opened').slideUp().removeClass('opened')
    $(this).next('.menu-outer').slideDown().addClass('opened')
  }
});

.menu-item {
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 15pt;
  cursor: pointer;
  margin-bottom: -1px;
  color: #ffffff;
  background-color: gray;
}

.menu-content {
  overflow: hidden;
}

.menu-outer {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="menu-item">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          Title
        </div>
      </div>
    </div>
  </div>
  <div class="menu-outer container">
    <div class="row">
      <div class="col-lg-12">
        <div class="menu-content">
          <div class="inner">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="menu-item">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          Title
        </div>
      </div>
    </div>
  </div>
  <div class="menu-outer container">
    <div class="row">
      <div class="col-lg-12">
        <div class="menu-content">
          <div class="inner">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Accoridon菜单向下和向上滑动

2 个答案: