Question

当点击$ menulink时，我想在.menu-link里面的跨度来切换它的类。我尝试了下面的代码，但我做错了，因为它不起作用：

$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#menu'),
$menulink = $('.menu-link'),
$arrow = $('.arrow-down');

$menulink.click(function() {
$menulink.toggleClass('active');
$menu.toggleClass('active');
$arrow.toggleClass('visible');
return false;
});});
})();

标记：

<a class="menu-link" href="#menu"><span class="arrow-down"></span><span>Menu</span></a>
<nav role="navigation" id="menu" class="">
<ul class="menu">
<li>stuff</li>
</ul>
</nav>

非常感谢任何帮助！：）

Answer 1

尝试

$menulink.find('span').toggleClass('active');

如果你只想要第一个跨度，那么

$menulink.find('span:first').toggleClass('active');

或想要拥有arrow-down类

的范围

$menulink.find('span.arrow-down').toggleClass('active');

Answer 2

$menulink.children('span').toggleClass('whatever');

点击功能内的

。

或者，如果您只想定位arrow-down span

$menulink.children('span.arrow-down').toggleClass('whatever');

Answer 3

试试这个

$menulink.children(':first').toggleClass('active');

这会找到您案例中<span>的第一个孩子

Answer 4

您使用的代码将切换页面上该类的所有元素。试试这个：

$(document).ready(function() {
   $('.menu-link').click(function() {
      $(this).toggleClass('active');
      $(this).children('.arrow-down').toggleClass('visible');
      $('#menu').toggleClass('active');
   });
});

Answer 5

我猜是因为$menu-link是一个锚标记，浏览器正在离开页面？

我不明白为什么上述任何一个答案都行不通，如果你没有。

尝试设置jsfiddle？

单击链接时jQuery切换span类

5 个答案: