我有以下html结构:
<div class="links">
<a href="#link_1">Link 1</a>
<a href="#link_2">Link 2</a>
<a href="#link_3">Link 3</a>
</div>
<div id="link_1" class="item open">
<h3>Title 1</h3>
<div class="details">
<p>Lorem Ipsum dolor sit</p>
</div>
</div>
<div id="link_2" class="item">
<h3>Title 2</h3>
<div class="details">
<p>Lorem Ipsum dolor sit</p>
</div>
</div>
<div id="link_3" class="item">
<h3>Title 3</h3>
<div class="details">
<p>Lorem Ipsum dolor sit</p>
</div>
</div>
默认情况下,某些“项目” div将处于打开状态。我正在将点击事件添加到“ .links a”。我需要为对应的项目组添加一个“开放”类。
目前,它会将'.open'添加到所有'div.item'http: //jsfiddle.net/rmbor/boc0c6ef/
任何解释方面的帮助都非常感谢
尝试如下重写逻辑,
var $href = $('.links a[href^="#"]');
$href.on('click', function(e) {
e.preventDefault();
$(this).parent().siblings('.item').eq($href.index(this)).addClass("open");
});
$(document).on('click', 'h3', function(e) {
e.preventDefault();
$(this).closest('.item')
.toggleClass('open');
});
找到index
相应的anchor
标签。通过使用它访问相关的目标元素并向其中添加类。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句