Question

我有以下HTML代码：

（示例：http://codepen.io/mdmoura/pen/EtpmK）

<a href="#">OPEN 1</a>
<p>TEXT 1</p>
<a href="#">OPEN 2</a>
<p>TEXT 2</p>

我有以下JS：

$('a').click(function (event) {  
  $('p').removeClass('open');
  $(this).next().toggleClass('open');
  return false;
});
$('html').click(function (event) {
  $('p').removeClass('open');
});

因此，当我点击链接时，下一段会打开或关闭。

但我希望一次只打开一个段落...... 所以我添加了

$('p').removeClass('open');

里面

$('a').click(function (event) {

但是现在我单击链接时段落没有关闭。它只会打开。

似乎切换停止工作......我该如何解决这个问题？

谢谢你，米格尔

Answer 1

问题在于，您要从所有open中删除p，当执行toggle时，它始终会添加该类。解决方案不是从点击的open元素的下一个a元素中删除类p

var $ps = $('p');
$('a').click(function (event) {
    var $next = $(this).next().toggleClass('open');
    $ps.not($next).removeClass('open');
    return false;
});
$('html').click(function (event) {
    $ps.removeClass('open');
});

演示：Fiddle

Answer 2

您只需要在此处进行简单的更改，因为从所有open中删除p会导致将open类添加到已点击其锚点的p标记中。

$('a').click(function (event) {  
  $(this).next().toggleClass('open');
  $('p').not($(this).next()).removeClass('open');
  return false;
});
$('html').click(function (event) {
  $('p').removeClass('open');
});

http://jsfiddle.net/bvzU6/1/

单击时切换P ...当时只有一个

2 个答案: