Question

我有一个带有一个子菜单的垂直手风琴菜单。当单击子菜单的选项时，子菜单会打开，但是它存在笨拙。这是代码的一个方面。我希望开幕式和闭幕式能够顺利进行，但我不能为我的生活找到如何实现这一目标。

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

“不稳定”问题来自margin: 10px auto; ul.mainmenu a。请注意，该选择器定位于a中包含的每个 .mainmenu元素。因此，当您点击.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元素中删除了margin属性，因为它导致了“choppiness” 我在.submenu添加了一个属性。 display: none会在页面加载时隐藏子菜单。在Javascript中，jQuery函数.toggle将在两个其他 jQuery函数之间切换。这些功能是.show()和.hide()。这实际上是为display: none添加.hide()和display: block属性的.show()属性。

我希望这有帮助！

jquery手风琴菜单子菜单上的乱七八糟的动画

1 个答案: