Question

我正在尝试构建一个非常简单的移动网站，其中内容框通过单击其相关按钮切换，然后点击其他任一按钮即可。

此代码可以同时切换每个内容框，即使我只想要与我点击的按钮相关的内容：

$('#buttonBar > .button:nth-of-type(1)').click(function(){
  $('.content').toggle(500);
});

所以，只要我告诉它只切换其相关内容（第n个类型（1）），就没有任何切换：

$('#buttonBar > .button:nth-of-type(1)').click(function(){
  $('#buttonBar > .content:nth-of-type(1)').toggle(500);
});

为什么它只是停止在这里工作？我不能用这种方式使用nth-type？如果我能弄清楚为什么我会遇到问题，我可以处理其余的事情。

以下是CodePen上的项目：HELP!

Answer 1

怎么样：

$('#buttonBar > .button:nth-of-type(1)').click(function(){
  $(this).toggle(500);
});

this指的是点击的元素。

Answer 2

我认为不需要使用：nth-of-type

var $contents = $('.content');
$('#buttonBar > .button').click(function () {
    var $next = $(this).next().stop(true).toggle(500);
    $contents.not($next).stop(true).hide(500)
});

演示：CodePen

jQuery：.toggle nth-of-type点击第n个类型？

2 个答案: