0

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

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

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

谢谢你，米格尔

4

2 回答 2

2

问题是因为您open要从所有ps 中删除，所以在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');
});

演示：小提琴

于 2013-10-04T17:51:58.977 回答
0

您只需要在这里进行一个简单的更改，因为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/

于 2013-10-04T17:59:00.917 回答