j查询幻灯片在菜单上切换跳转动画切换
jQuery slideToggle jump animation on menu toggle
所以我的问题和标题一样简单,当我单击黑色的大"V"切换菜单时,动画会跳到带有子菜单的<li>
上。
我尝试了多种方法,但似乎都没有奏效,我在width
上遇到了类似的问题,我通过将width
设置为 100% 来解决。在我的搜索中,我看到有人认为jQuery无法计算元素的高度,但是如果我尝试为元素添加高度,它会完全破坏菜单。
这是代码笔,以便您可以体验我的问题。代码笔
.HTML
<nav class="main-menu">
<ul>
<li class="level-1"><a href="<?php echo get_category_link( 5 ) ?>">Item 1</a>
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2"><a href="<?php echo get_category_link( 9 ) ?>">Item 1.1</a>
<span class="toggle-2">V</span>
<ul class="sub-menu-2">
<li class="level-3"><a href="<?php echo get_category_link( 11 ) ?>">Item 1.1.1</a></li>
<li class="level-3"><a href="<?php echo get_category_link( 12 ) ?>">Item 1.1.2</a></li>
<li class="level-3"><a href="<?php echo get_category_link( 13 ) ?>">Item 1.1.3</a></li>
<li class="level-3"><a href="<?php echo get_category_link( 14 ) ?>">Item 1.1.4</a></li>
</ul>
</li>
<li class="level-2"><a href="<?php echo get_category_link( 10 ) ?>">Item 1.2</a>
<span class="toggle-2">V</span>
<ul class="sub-menu-2">
<li class="level-3"><a href="<?php echo get_category_link( 15 ) ?>">Item 1.2.1</a></li>
<li class="level-3"><a href="<?php echo get_category_link( 16 ) ?>">Item 1.2.2</a></li>
</ul>
</li>
<li class="level-2"><a href="<?php echo get_category_link( 25 ) ?>">Item 1.3</a></li>
</ul>
</li>
<li class="level-1"><a href="<?php echo get_category_link( 6 ) ?>">Item 2</a>
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2"><a href="<?php echo get_category_link( 18 ) ?>">Item 2.1</a></li>
<li class="level-2"><a href="<?php echo get_category_link( 19 ) ?>">Item 2.2</a></li>
<li class="level-2"><a href="<?php echo get_category_link( 20 ) ?>">Item 2.3</a></li>
<li class="level-2"><a href="<?php echo get_category_link( 21 ) ?>">Item 2.4</a></li>
<li class="level-2"><a href="<?php echo get_category_link( 22 ) ?>">Item 2.5</a></li>
</ul>
</li>
<li class="level-1"><a href="<?php echo get_category_link( 7 ) ?>">Item 3</a></li>
<li class="level-1"><a href="<?php echo get_category_link( 8 ) ?>">BItem 4</a>
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2"><a href="<?php echo get_category_link( 23 ) ?>">Item 4.1</a></li>
<li class="level-2"><a href="<?php echo get_category_link( 24 ) ?>">Item 4.2</a></li>
</ul>
</li>
</ul>
</nav>
.CSS
.main-menu .sub-menu-1, .main-menu .sub-menu-2 {
display: none;
}
.main-menu ul {
width: 100%;
}
.main-menu li {
line-height: 25px;
}
.main-menu li.level-1 {
background-color: red;
}
.main-menu li.level-2 {
background-color: lightblue;
}
.main-menu li.level-3 {
background-color: yellow;
}
.main-menu a {
display: block;
margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
display: block;
float: right;;
font-size: 20px;
font-weight: bold;
width: 20px;
transform: translateY(-25px);
}
Javascript/jQuery
$(document).ready(function() {
$('.sub-menu-1, .sub-menu-2').hide();
$('.toggle-1').click( function() {
$(this).next('.sub-menu-1').slideToggle();
});
$('.toggle-2').click( function() {
$(this).next('.sub-menu-2').slideToggle();
});
});
提前谢谢你,希望有人能帮助我。
该问题是由您在 css 中设置为display: block;
<span>
引起的。
将.main-menu a
和.main-menu .toggle-1, .main-menu .toggle-2
切换为display: inline-block;
可以解决此问题。然后,您还可以删除一些其他不必要的 css hack,这些黑客以前用于将这些元素强行放置在其文档流位置之外。
更新后的CSS如下,您可以看到笔的分支,两个子菜单都在这里工作
.main-menu a {
display: inline-block;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
display: inline-block;
float: right;
font-size: 20px;
font-weight: bold;
width: 20px;
}
我认为唯一的问题是您没有将clear
属性设置为浮点数。如果您将其设置为:
.main-menu a {
margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
float: right;
clear: none;
font-size: 20px;
font-weight: bold;
width: 20px;
}
你很好。然后,您也不需要transform: translate
将元素移回。这是你的代码笔的一个分支:http://codepen.io/anon/pen/WwbPLV
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- j查询动画重置后事件不起作用
- 基于媒体查询的angular js动画无法调整窗口大小
- j查询文本滑块动画
- j查询动画重叠
- j查询动画 在事件完成之前触发“完成”
- j查询使用动画更改图像并等待它触发超链接
- j在后退按钮上查询动画
- j查询幻灯片在菜单上切换跳转动画切换
- 为查询同位素过滤添加动画
- j查询翻页动画
- j查询链接与动画函数的回调
- j查询动画在锚标记或锚标记子项中不起作用
- 查询动画函数调用
- 单击导航按钮时,如何停止查询动画que
- jQuery在一个循环中查询多个延迟的动画,有时动画不会执行
- Angular2动画媒体查询