使用jQuery从H3向下滑动下一个UL
Slide Down Next UL from H3 with jQuery
<h3>Details<span class="dropdown">View</span></h3>
<div id="sbc">
<ul>
<li><h2>Role: Supervisor</h2></li>
<li>Manager Contact:</li>
<li class="small">*location closed - please contact corporate office for further assistance</li>
<li><a href=""></a></li>
<li><h2>Responsibilities</li>
<li>
<ul>
<li>Assist customers with miscellaneous issues from AIV, AppStore, Kindle Tier 2</li>
<li> - Fallback - Kindle Tier 1</li>
</ul>
</li>
</ul>
</div>
尝试编写jQuery来onClick滑下UL下面的跨度。尝试了多种解决方案,但似乎都失败了。
这是我的jQUery代码:<script>
(function() {
$('span.dropdown').on('click', function() {
$(this).next('ul').slideToggle();
});
})(jQuery);
</script>
绞尽脑汁....我不是一个完全的新手(但显然我是),希望得到一些帮助。
点击* * *滑下来:ul:跨度后
切换。
您需要这样做:
$(this)
.parent() // Go to the parent h3 element of current span clicked
.next('#sbc') // Go to the next div element with id 'sbc'
.children('ul') // Go to its child ul element
.slideToggle(); // and finally slide toggle
回答了自己的问题....(是的,12秒后)
<script>
(function() {
$('span.dropdown').on('click', function() {
$(this).parent().next('ul').slideToggle();
});
})(jQuery);
</script>
谢谢你的帮助!我知道我是个白痴,错误地记录了DOM:-P
您需要先遍历到父元素,获得下一个元素,然后获得子元素ul
:
$(this).parent().next().children('ul').slideToggle();
因为你的div
有一个id
,并且id
必须是唯一的,你可以这样做:
$('#sbc > ul').slideToggle();
试试这个
$('span.dropdown').on('click', function() {
$('ul').slideToggle();
// alert('hi');
});
试试这个让我知道
$('.dropdown').on('click', function() {
$(this).parent().next().children('ul').slideToggle();
});
相关文章:
- 滚动到容器中的下一个元素-几乎到了
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 使用ajax将数据从一个步骤发送到下一个步骤的3步表单
- AngularJS&JSON-从Previous&下一个对象
- 使用向下箭头键(与tab键一样)聚焦下一个输入
- 来自文档或下一个静态父级的事件委派
- angularjs移除焦点上的活动类并添加到下一个项目
- 禁用旋转木马中的下一个按钮和上一个按钮
- 当按下一个键时,请多次按下不同的键
- 正在加载下一个帖子
- 构建JS测试,警报窗口重复上一个Q,而不是问下一个Q
- 删除“;上一个“;以及“;下一个“;基于当前幻灯片
- 真正的下一个具有特定类的元素
- 如何使用javascript获取下一个/转发url
- 悬停显示下一个“ul”的“李”
- 如果下一个ul是隐藏的,想要显示下一个ul
- 如何瞄准下一个<ul>在<ul>使用jquery
- 使用jQuery从H3向下滑动下一个UL
- 动态链接到ul树的下一个同级