伙计们!我有几个链接的菜单,当我点击其中一个我想显示水平线,就像下面的截图。x1c 0d1x
我试过使用这个脚本,但现在css属性适用于所有的链接。我应该做什么,以删除不活跃的链接属性,并将其应用到一个,我点击?谢谢!
$('.main-menu-link-container').click(function() {
$(this).find('.main-menu-link-line').css({"width": "6.11em", "marginRight": "2.36em"});
});
1条答案
按热度按时间uplii1fm1#
缺少一些上下文,因此很难完美地解决您的确切问题。
无论如何,您主要关心的是如何处理***仅***触发单击事件的元素。
要实现该结果,需要将
event
变量传递给事件处理函数,以便通过event.target
检索触发事件的元素。据我所知,在jQuery中,
$(this)
相当于event.currentTarget
,这意味着它将被设置为实际附加了事件处理程序的元素,但如果该元素的子元素触发了事件(由于事件冒泡),它将不会比这更具体。我稍微修改了代码,这要感谢一个用户的评论,它向我展示了一些缺点。
单击链接时,
event.target
和$(this)
的值都会在控制台上打印出来。此外,由于之前如果您单击容器,事件处理程序无论如何都会触发,因此我添加了一个逻辑,该逻辑仅在将样式删除到其他链接(如果有任何链接已经具有该样式)之后,才将样式应用到所单击的元素上。它只会从所有链接中删除样式,并且不会执行添加操作,因为不存在包含类
main-menu-link-line
的主容器的直接子容器(>
)。无论如何,当前的策略不是通过
css
来改变样式,而是添加和删除一个具有这些css属性集的css类。第一个