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');
});

リンクをクリックすると、次の段落が開いたり閉じたりします。

しかし、一度に1つの段落だけを開きたい...だから私は追加した

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

中身

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

しかし、リンクをクリックしても段落が閉じません。開くだけです。

トグルが機能しなくなったようです...どうすれば解決できますか？

ありがとう、ミゲル

4

2 に答える 2

2

open問題は、すべてpの sから削除しているためです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常にクラスが追加されるため、ここで簡単な変更が必要です。openp

$('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 に答える