CSSでクリックでテキストを拡大する、クロスブラウザの方法はありますか？

StackOverflow https://stackoverflow.com/questions/842228

質問

まず、ここで私がやりたいものです。

Row 1
Row 2
Row 3
私はROW1、2または3にカーソルを合わせたときに、行がハイライト表示されますように、

Iコードを設定しています。これは、CSSを介して行われます。

私ができるようにしたいと思います（例えば）ROW1をクリックしてから、それは次のようになります：

Row 1
  Some text here
Row 2
Row 3
私はそれが離れて行くだろう、その時点で別の行をクリックするまで、

そのテキストが滞在します。たとえば、のは、私は次の行2をクリックしたとしましょう。

Row 1
Row 2
  Even more text here
Row 3

私はこれを行うにはJavaScriptを使用して、テキストの可視性を設定について語っコードを見つけましたが、私は、私は近くの重複コードのトンを持たずにこれを行うことができますかどうかはわかりませんが...。

役に立ちましたか？

解決

あなたはjQueryのは正当化されると、それは便利来るこの機能のために必要以上のjavascriptを使用している場合。 jQueryを使って、それはのようなものになるでしょう。

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

    });

他のヒント

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を使用したくないと思った、私は質問を読み違えているかもしれないと思います。まあ、私はとにかく私の答えを任せるます。

これを処理するための唯一の真のクロスブラウザの方法は、残念ながら多くの古いブラウザはサポートしていませんでした、Javascriptのである：アンカー要素以外に疑似クラスを置く

あなたは自分の Fx.Slide の効果のために、または誰とMooToolsのをチェックアウトする場合があります他に必ず、jQueryのを述べています。

私はおそらくちょうどだけでなく、このためにjQueryを使用することになりますが、OPは、すべてここに（修正してくださいのみFF3 / Mac上でテストしたが、それは、クロスブラウザの合理的に自信を持って、普通の古いJavaScriptのソリューションであることを言及しなかったので、私私が間違っている場合）：

<html>
    <head>
        <style type="text/css">
        #data h2 {
            /* colour should be same as BG colour, stops element expanding 
                on hover */
            border: 1px solid #fff;
            /* indicates to user that they can do something */
            cursor: pointer;
        }

        #data h2:hover { /* Note this isn't supported in IE */
            border: 1px solid #333;
        }

        .hidden p {
            display:none;
        }
        </style>
        <script type="text/javascript">
        function init() {
            var list = document.getElementById('data');
            var rows = list.getElementsByTagName('li');
            var active;
            for(var i = 0; i < rows.length; i++) {
                var row = rows[i];
                // Hide if not the first, otherwise make active
                if(i != 0) {
                    row.className = "hidden";
                } else {
                    active = row;
                }
                row.getElementsByTagName('h2').item(0).onclick = function() {
                    active.className = "hidden";
                    this.parentNode.className = "";
                    active = this.parentNode;
                }
            }
        }
        </script>
    </head>
    <body onload="init()">
        <!-- I'm using <ul> here since you didn't state the actual markup, 
            but you should be able to adapt it to anything -->
        <ul id="data">
            <li>
                <h2>Row 1</h2>
                <p>Some text here</p>
            </li>
            <li>
                <h2>Row 2</h2>
                <p>Some text here</p>
            </li>
            <li>
                <h2>Row 3</h2>
                <p>Some text here</p>
            </li>
        </ul>
    </body>
</html>

はJavaScriptが有効になっている場合、行の内容のみ、重要な（そしてしばしば逃した！）、アクセシビリティ面を隠されていることに注意してください。

あなたはそれを行うための簡単なクロスブラウザの方法をしたい場合は、

は、私は強く jQueryのの

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top