3

CSS単純な表示/非表示効果を得るために、要素をクリックするとすぐに、要素の次の兄弟にクラス名を追加したい

次の html 出力があり、要素 ID がありません。

<div class="news-message">
  <div class="message-head"> Headline of Message 1 </div>
  <div class="message-content"> Here comes the content of message 1 </div>
</div>
<div class="news-message">
  <div class="message-head"> Headline of Message 2 </div>
  <div class="message-content"> Here comes the content of message 2 </div>
</div>
<div class="news-message">
  <div class="message-head"> Headline of Message 3 </div>
  <div class="message-content"> Here comes the content of message 3 </div>
</div>

ここで、メッセージの内容を非表示にして、見出しだけを表示したいと思います ( で簡単に実現できますdisplay: none)。

見出しをクリックするとすぐに、その特定のメッセージの内容が表示されるようにします。

だから私の考えは、メッセージヘッドをクリックしCSSて「メッセージコンテンツ」に「可視」クラスを追加DIVし、別のクリックでそれを削除することでした。

そこで、「onClick="changeClass()」を「pm-head」要素と次の JavaScript に追加しました。

function changeClass() {
  var hidecontent = document.querySelectorAll('.message-content');
  var i;
  for (i = 0; i < hidecontent.length; i++) {
    hidecontent[i].classList.toggle('visible');      }    }

しかし、これにより、そのページのすべての「メッセージコンテンツ」divに表示されるクラスが追加されますが、クリックした「pm-head」要素の次の兄弟に追加する必要があります。

そして、これで jquery や他のフレームワーク/ライブラリを使用することはできません。

申し訳ありませんが、私はJavaScriptが初めてで、おそらく答えやすい質問です。

ありがとうジョン

4

3 に答える 3

7

nextSiblingはあなたが求める答えです。自分でテストせずに、これはうまくいくはずです：

function changeClass(e) {
    e.target.nextSibling.classList.toggle("visible");
}
于 2016-09-26T12:35:12.970 に答える
1

次のコードを使用できます。このコードでは、追加のクラスhiddenを定義し、メッセージ コンテンツ タグごとに HTML に追加する必要があります。

Array.from(document.querySelectorAll('.news-message'), function (elem) {
    elem.addEventListener('click', function hideContent(e) {
        e.currentTarget.querySelector('.message-content').classList.toggle('hidden');
    });
});


Array.from(document.querySelectorAll('.news-message'), function (elem) {
    elem.addEventListener('click', function hideContent(e) {
        e.currentTarget.querySelector('.message-content').classList.toggle('hidden');
    });
});
.hidden { display:none; }
<div class="news-message">
  <div class="message-head">
    Headline of Message 1
    </div>
   <div class="message-content hidden">
    Here comes the content of message 1
   </div>
</div>

<div class="news-message">
  <div class="message-head">
    Headline of Message 2
    </div>
   <div class="message-content hidden">
    Here comes the content of message 2
   </div>
</div>

<div class="news-message">
  <div class="message-head">
    Headline of Message 3
    </div>
   <div class="message-content hidden">
    Here comes the content of message 3
   </div>
</div>

を使用することもできますが、これは別のアプローチを使用することに注意してください。親である要素nextSiblingのクリックをキャプチャし、要素を見つけ、最後にその要素の隠しクラスを切り替えます。news-messagemessage-content

親レベルでクリック イベントをキャプチャすることにより、コンテンツ自体をクリックしてコンテンツの表示を切り替えることもできます。これは便利です。この動作が望ましくない場合は、コードを次のように変更します。

Array.from(document.querySelectorAll('.message-head'), function (elem) {
    elem.addEventListener('click', function hideContent(e) {
        e.currentTarget.parentNode.querySelector('.message-content')
                       .classList.toggle('hidden');
    });
});


Array.from(document.querySelectorAll('.message-head'), function (elem) {
    elem.addEventListener('click', function hideContent(e) {
        e.currentTarget.parentNode.querySelector('.message-content')
                       .classList.toggle('hidden');
    });
});
.hidden { display:none; }
<div class="news-message">
  <div class="message-head">
    Headline of Message 1
    </div>
   <div class="message-content hidden">
    Here comes the content of message 1
   </div>
</div>

<div class="news-message">
  <div class="message-head">
    Headline of Message 2
    </div>
   <div class="message-content hidden">
    Here comes the content of message 2
   </div>
</div>

<div class="news-message">
  <div class="message-head">
    Headline of Message 3
    </div>
   <div class="message-content hidden">
    Here comes the content of message 3
   </div>
</div>

このバリエーションは、ヘッダーのクリックのみを処理し、その親ノードに移動し、そこから前と同じように進みます。

于 2016-09-26T12:56:52.950 に答える