Gibt es eine Cross-Browser-Möglichkeit, Text auf Klick über CSS zu erweitern?

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

Frage

Als erstes ist hier, was ich tun: 

Row 1
Row 2
Row 3

Ich habe Code-Setup, so dass, wenn ich über row1 schweben, 2 oder 3, wird die Zeile hervorgehoben. Dies geschieht über CSS getan.

Ich möchte in der Lage sein (zum Beispiel) klicken row1 und dann würde es so aussehen: 

Row 1
  Some text here
Row 2
Row 3

Dieser Text würde dort bleiben, bis ich auf einer anderen Zeile geklickt, an dem sie verschwinden würde zeigen. Zum Beispiel, sagen wir, ich auf Zeile geklickt 2 weiter. 

Row 1
Row 2
  Even more text here
Row 3

Ich habe Code gefunden, die Javascript spricht über die Verwendung, dies zu tun und die Sichtbarkeit des Textes einstellen, aber ich bin nicht sicher, wie ich das tun kann eine Tonne in der Nähe von doppeltem Code, ohne ...

War es hilfreich?

Lösung

Wenn Sie mehr haben Javascript als die benötigt für diese Funktion jQuery gerechtfertigt ist, und es wird kommen praktisch. Mit jQuery, wäre es so etwas wie

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

    });

Andere Tipps

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>

Ich denke, das ist so nah wie Sie ohne Verwendung von Javascript zu bekommen.

Edit: Ich denke, dass ich die Frage falsch verstanden haben, dachte ich, er nicht Javascript verwenden wollte. Na ja, werde ich meine Antwort überlassen trotzdem.

Der einzige wirkliche Cross-Browser-Weg zu handhaben ist mit Javascript, wie leider viele ältere Browser unterstützen nicht. Pseudo-Klassen auf etwas anderes als Ankerelemente schweben

Sie möchten vielleicht MooTools für ihre Fx.Slide Effekt überprüfen, oder wie jeder sonst immer erwähnt, JQuery.

würde ich wahrscheinlich nur für diesen Einsatz jQuery als gut, aber seit der OP nicht erwähnt, dass überhaupt hier ist eine einfache alte Lösung JavaScript, getestet nur auf FF3 / Mac aber recht zuversichtlich, es ist Cross-Browser (bitte korrigieren mich wenn ich falsch liege): 

<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>

Beachten Sie, dass der Zeileninhalt nur ausgeblendet, wenn JavaScript aktiviert ist, ein wichtigen (und oft übersehen!) Zugänglichkeit Aspekt.

Wenn Sie eine einfache Cross-Browser-Art und Weise wollen, es zu tun, würde ich dringend empfehlen Sie jQuery

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top