1

私はこのHTMLを持っています:

<div id="parent1" class="article">
   <div class="action"></div>
   <div id="exp1" class="expand"></div>
</div>
<div id="parent2" class="article">
   <div class="action"></div>
   <div id="exp2" class="expand"></div>
</div>

およびCSS:

.article:hover .action {
   z-index:1000;
}
.expand {
   display: none;
} 
action {
   background: url(../images/down.png) 0 0 no-repeat;
   z-index: -999;
}
.collapse {
   background: url(../images/up.png) 0 0 no-repeat !important;
   z-index: 1000;
}

および Javascript:

$(".article").click(function() {
   $(this).find(".action").toggleClass("collapse"); // works onclick div article
   ????????? // when press parent1 if parent2 pressed before ???????.find(".action").toggleClass("collapse");
   $("#exp2").hide(); // if previously open
   $("#exp1").toggle(300);
}

今、私はonclickのparent1がparent2のtoggleClassアクションにjQueryを必要としていますが、以前に折りたたみに切り替えた場合に限ります。

4

2 に答える 2

0

ここで推測しますが、開いている.articleを閉じて、クリックしたものを開きたいと思います。

$(".article").click(function() {
   // see explanations 1 and 2 below
   $('.article.active').removeClass('active').find('#exp1').hide();

   // see explanation 3 below
   $(this).addClass('active').find('#exp2').show();
}

必要に応じてコードを変更できますが、理解できるようになります。

  1. .articleをクリックすると、特定のクラス（私の例では.active）を持つ他の.articleを探します。技術的には、.article.activeは1つだけになる可能性があります
  2. その.activeクラスを削除し、そのクラスまたはその子に対して何でもします
  3. クリックした記事でようやく何でもします
于 2011-12-11T05:34:45.843 に答える
0

それを行うにはいくつかの方法があります。通常、ドロップダウンの状態を保持するローカル変数 (ブール値) を保存し、それを確認します。

jQuery では、既に hide() を使用しているため、以下を使用できます。

if ($("#exp2").is(":hidden")) {
    // Show content, set arrow to up.
    $("#exp2").removeClass("expand").addClass("collapse");
}
else {
    // Hide content, set arrow to down.
    $("#exp2").removeClass("collapse").addClass("expand");
}

クラスを追加および削除するだけの場合、トグルはより理にかなっています。ここであなたはクラスを交互にしています。addClass() と removeClass() を使用すると、何をしているのかが非常に明確になります。

于 2011-12-11T04:47:08.287 に答える