jquery 手风琴菜单子菜单上的动画不稳定

Question

我有一个带有一个子菜单的垂直手风琴菜单。单击带有子菜单的选项时，子菜单会打开，但它很笨拙。这是代码的jsfiddle。我希望打开和关闭能够顺利进行，但我一直想不出如何实现这一点。

 <!-- Menu -->
    <section>
        <div class="home-menu text-center">
            <nav class="navigation">
                <ul class="mainmenu">
                    <li class="dropdown"> <a href="#" class="dropdown-li">Shop</a>
                        <ul class="submenu">
                            <li><a href="monmouth.html">Monmouth</a></li>
                            <li><a href="shopify.html">Online</a></li>
                        </ul>
                    </li>
                    <li><a href="ethos.html">Ethos</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>
    </section>
    <!-- End Menu -->

**CSS**

.mainmenu,
.submenu,
.sidemenu-nav {
list-style: none;
padding: 0;
margin: 0;
}

ul.mainmenu a {
font-family: 'Homemade Apple', cursive;
position: relative;
display: block;
text-decoration: none;
padding: 25px 20px;
margin: 10px auto;
text-transform: capitalize;
color: rgba(76, 76, 76, 1.0);
font-size: 2.35em;
}

ul.mainmenu li:nth-child(odd) {
background: url("../img/menu_item_bg.svg") no-repeat;
background-position: center center;
background-size: contain;
}

ul.mainmenu li:nth-child(1) {
background: none;
}

.dropdown-li {
background: url("../img/menu_item_alt_bg.svg") no-repeat;
background-position: center center;
background-size: contain;
}

ul.mainmenu li:nth-child(even) {
background: url("../img/menu_item_alt_2_bg.svg") no-repeat;
background-position: center center;
background-size: contain;
}
ul.submenu a {
font-family: 'Homemade Apple', cursive;
margin: 10px auto;
text-transform: capitalize;
color: rgba(76, 76, 76, 1.0);
font-size: 1.35em;
}

ul.submenu li:nth-child(even) {
background: url("../img/menu_item_alt_2_bg.svg") no-repeat;
background-position: center center;
background-size: contain;
}

ul.submenu li:nth-child(odd) {
background: url("../img/menu_item_alt_bg.svg") no-repeat;
background-position: center center;
background-size: contain;
}

**JQuery**
$(".mainmenu > ul").ready(function () {
    $("ul.submenu").attr('style', 'display:none;');
});
$(".mainmenu > li > a").on("click", function (e) {
    //if submenu is hidden, does not have active class  
    if (!$(this).hasClass("active")) {
        // hide any open menus and remove active classes
        $(".mainmenu li ul").slideUp(350);
        $(".mainmenu li a").removeClass("active");
        // open submenu and add the active class
        $(this).next("ul").slideDown(350);
        $(this).addClass("active");
        //if submenu is visible    
    }
    else if ($(this).hasClass("active")) {
        //hide submenu and remove active class
        $(this).removeClass("active");
        $(this).next("ul").slideUp(350);
    }
});

Answer 1

"choppy" 问题来自 margin: 10px auto; ul.mainmenu a。请记住，该选择器的目标是包含在 .mainmenu 中的 EVERY a 元素。因此，当您单击 .dropdown-li 时，播放幻灯片动画并且两个 li 元素之间的 10px 边距在 ul.mainmenu 和 ul.submenu 之间变为 20；至少在动画完成之前，这就是导致跳跃的原因。

有一个快速简单的内置 jQuery 函数可以用于您尝试创建的这个东西：

$(document).ready(function() {
  $('.dropdown-li').click(function() {
    $('.submenu').toggle('fast')
  });
});

.mainmenu,
.submenu,
.sidemenu-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.mainmenu a {
  font-family: 'Homemade Apple', cursive;
  position: relative;
  display: block;
  text-decoration: none;
  padding: 25px 20px;
  text-transform: capitalize;
  color: rgba(76, 76, 76, 1.0);
  font-size: 2.35em;
}
ul.mainmenu li:nth-child(odd) {
  background: url("../img/menu_item_bg.svg") no-repeat;
  background-position: center center;
  background-size: contain;
}
ul.mainmenu li:nth-child(1) {
  background: none;
}
.dropdown-li {
  background: url("../img/menu_item_alt_bg.svg") no-repeat;
  background-position: center center;
  background-size: contain;
}
ul.mainmenu li:nth-child(even) {
  background: url("../img/menu_item_alt_2_bg.svg") no-repeat;
  background-position: center center;
  background-size: contain;
}
ul.submenu a {
  font-family: 'Homemade Apple', cursive;
  margin: 10px auto;
  text-transform: capitalize;
  color: rgba(76, 76, 76, 1.0);
  font-size: 1.35em;
}
ul.submenu li:nth-child(even) {
  background: url("../img/menu_item_alt_2_bg.svg") no-repeat;
  background-position: center center;
  background-size: contain;
}
ul.submenu li:nth-child(odd) {
  background: url("../img/menu_item_alt_bg.svg") no-repeat;
  background-position: center center;
  background-size: contain;
}
ul.submenu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Menu -->
<section>
  <div class="home-menu text-center">
    <nav class="navigation">
      <ul class="mainmenu">
        <li class="dropdown"> <a href="#" class="dropdown-li">Shop</a>
          <ul class="submenu">
            <li><a href="monmouth.html">Monmouth</a>
            </li>
            <li><a href="shopify.html">Online</a>
            </li>
          </ul>
        </li>
        <li><a href="ethos.html">Ethos</a>
        </li>
        <li><a href="contact.html">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</section>
<!-- End Menu -->

我从最上面的 a 元素中删除了边距属性，因为它导致了 "choppiness" 我给你的 .submenu 添加了一个属性。 display: none 将在页面加载时隐藏子菜单。在 Javascript 中，jQuery 函数 .toggle 将在两个 other jQuery 函数之间切换。这些函数是 .show() 和 .hide()。这实际上是为 .hide() 添加 display: none 属性和为 .show() 添加 display: block 属性。

希望对您有所帮助！

jquery 手风琴菜单子菜单上的动画不稳定

choppy animation on jquery accordion menu submenu

jquery

accordion

slidedown