代码之家 › 专栏 › 技术社区 › GeoffreyF67

有没有一种跨浏览器的方式可以通过css在点击时展开文本?

expand highlight hover css javascript

3

GeoffreyF67 · 技术社区 · 17 年前

首先,我想做的是:

Row 1
Row 2
Row 3

我希望能够(例如)单击第1行,然后它看起来像这样:

Row 1
  Some text here
Row 2
Row 3

Row 1
Row 2
  Even more text here
Row 3

我发现了一些代码,其中谈到了使用javascript来实现这一点并设置文本的可见性,但我不确定如何在没有大量近乎重复的代码的情况下做到这一点。..

5 回复 | 直到 14 年前

1

7

strager 17 年前

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

    });

2

3

Aistina 17 年前

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

3

2

zombat 17 年前

Fx.Slide 效果,或者正如其他人总是提到的,JQuery。

4

2

roryf 17 年前

我可能也会使用jQuery,但由于OP根本没有提到这是一个普通的旧JavaScript解决方案,只在FF3/Mac上进行了测试,但有理由相信它是跨浏览器的(如果我错了,请纠正我):

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

5

1

Nadia Alramli 17 年前

如果你想要一种简单的跨浏览器方式,我强烈建议你使用 jQuery