单击jQuery以定位组中的特定元素

rmbor

我有以下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/

任何解释方面的帮助都非常感谢

拉贾普布(Rajabrabhu Aravindasamy)

尝试如下重写逻辑,

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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用XPATH定位特定的元素,然后从该元素向前移动以定位树中的下一个表

来自分类Dev

定位特定元素的jQuery

来自分类Dev

如何向下滚动特定 div 以定位元素并通过 java 中的 selenium webdriver 使其可点击

来自分类Dev

从Jquery Mobile中的控件组中删除特定元素

来自分类Dev

在元素组上的 if.length 函数之后定位特定元素

来自分类Dev

如何堆叠通配符以定位特定文件?

来自分类Dev

在jQuery中定位特定表

来自分类Dev

从ConcurrentLinkedDeque中的特定位置获取元素

来自分类Dev

从ConcurrentLinkedDeque中的特定位置获取元素

来自分类Dev

是否可以定义包含属性组的元素组?

来自分类Dev

jQuery在分离文件中定位SVG元素

来自分类Dev

如何定位要在网站中单击的元素

来自分类Dev

解析推送通知可以定位到特定的iOS吗?

来自分类Dev

使用jQuery定位ID中的特定类

来自分类Dev

单击下拉列表中的特定元素

来自分类Dev

从没有jQuery的元素组中删除特定的类

来自分类Dev

jQuery-从具有特定类的元素列表中获取单击项的索引

来自分类Dev

如何使用 JS 在 React 中定位滚动中的特定元素?

来自分类Dev

将元素添加到列表中的特定位置

来自分类Dev

删除MXN numpy数组中特定位置的元素

来自分类Dev

如何删除数组中特定位置的任何元素?

来自分类Dev

如何使用Access VBA在Internet Explorer中定位特定元素

来自分类Dev

如何使用Selenium Webdriver在表中定位特定元素

来自分类Dev

如何定位嵌套在HTML / CSS代码中的特定元素?

来自分类Dev

将元素添加到列表中的特定位置

来自分类Dev

在矩阵C++编程中在特定位置插入元素

来自分类Dev

AngularJS - 在 ng-repeat 中定位特定元素

来自分类Dev

用python3中的特定元素替换元素组

来自分类Dev

单击 Jquery 从数组中获取元素的索引

Related 相关文章

  1. 1

    使用XPATH定位特定的元素,然后从该元素向前移动以定位树中的下一个表

  2. 2

    定位特定元素的jQuery

  3. 3

    如何向下滚动特定 div 以定位元素并通过 java 中的 selenium webdriver 使其可点击

  4. 4

    从Jquery Mobile中的控件组中删除特定元素

  5. 5

    在元素组上的 if.length 函数之后定位特定元素

  6. 6

    如何堆叠通配符以定位特定文件?

  7. 7

    在jQuery中定位特定表

  8. 8

    从ConcurrentLinkedDeque中的特定位置获取元素

  9. 9

    从ConcurrentLinkedDeque中的特定位置获取元素

  10. 10

    是否可以定义包含属性组的元素组?

  11. 11

    jQuery在分离文件中定位SVG元素

  12. 12

    如何定位要在网站中单击的元素

  13. 13

    解析推送通知可以定位到特定的iOS吗?

  14. 14

    使用jQuery定位ID中的特定类

  15. 15

    单击下拉列表中的特定元素

  16. 16

    从没有jQuery的元素组中删除特定的类

  17. 17

    jQuery-从具有特定类的元素列表中获取单击项的索引

  18. 18

    如何使用 JS 在 React 中定位滚动中的特定元素?

  19. 19

    将元素添加到列表中的特定位置

  20. 20

    删除MXN numpy数组中特定位置的元素

  21. 21

    如何删除数组中特定位置的任何元素?

  22. 22

    如何使用Access VBA在Internet Explorer中定位特定元素

  23. 23

    如何使用Selenium Webdriver在表中定位特定元素

  24. 24

    如何定位嵌套在HTML / CSS代码中的特定元素?

  25. 25

    将元素添加到列表中的特定位置

  26. 26

    在矩阵C++编程中在特定位置插入元素

  27. 27

    AngularJS - 在 ng-repeat 中定位特定元素

  28. 28

    用python3中的特定元素替换元素组

  29. 29

    单击 Jquery 从数组中获取元素的索引

热门标签

归档