3

まず、これが私がやりたいことです：

Row 1
Row 2
Row 3

行1、2、または3にカーソルを合わせると、行が強調表示されるようにコードを設定しています。これはcssを介して行われます。

（たとえば）row1をクリックできるようにしたいと思います。そうすると、次のようになります。

Row 1
  Some text here
Row 2
Row 3

そのテキストは、別の行をクリックするまでそこにとどまり、クリックすると消えます。たとえば、次の行2をクリックしたとします。

Row 1
Row 2
  Even more text here
Row 3

javascriptを使用してこれを実行し、テキストの可視性を設定することについて説明しているコードを見つけましたが、大量のほぼ重複したコードがなくてもこれを実行する方法がわかりません...

4

5 に答える 5

7

この機能に必要な数よりも多くのJavaScriptがある場合、jQueryは正当化され、便利になります。jQueryを使用すると、次のようになります

$(".classOfYourRows").
    click(function(){
        $(".classOfChildren").hide();
        $(".classOfChildren", this).show();

    });
于 2009-05-08T23:32:36.343 に答える
3

CSS:

.outer {
  display: block;
}

.outer .inner {
  display: none;
  margin-left: 10px;
}

.outer:hover {
  background-color: #EEEEEE;
}

.outer:active .inner {
  display: block;
}

HTML:

<div class="outer">
    Row 1
    <div class="inner">some text</div>
</div>
<div class="outer">
    Row 2
    <div class="inner">some text</div>
</div>
<div class="outer">
    Row 3
    <div class="inner">some text</div>
</div>

Javascriptを使わずにできる限り近いと思います。

編集：私は質問を読み違えたかもしれないと思います.私は彼がJavascriptを使いたくないと思っていました. まあ、とにかく答えを残しておきます。

于 2009-05-08T23:40:20.927 に答える
2

残念ながら、多くの古いブラウザーはアンカー要素以外の :hover 疑似クラスをサポートしていなかったため、これを処理する唯一のクロスブラウザーの方法は Javascript を使用することです。

MooTools のFx.Slide効果、または他の誰もが常に言及しているように、JQuery を確認することをお勧めします。

于 2009-05-08T23:36:18.737 に答える
1

簡単なクロスブラウザの方法が必要な場合は、jQueryを使用することを強くお勧めします

于 2009-05-08T23:30:01.327 に答える