是否有跨浏览器的方式来通过 css 扩展点击文本？答案

【问题标题】：Is there a cross browser way to expand text on click via css?是否有跨浏览器的方式来通过 css 扩展点击文本？
【发布时间】：2010-10-24 22:36:11
【问题描述】：

首先，这是我想做的：

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 执行此操作并设置文本可见性的代码，但我不确定如何在没有大量重复代码的情况下执行此操作...

【问题讨论】：

标签： javascript css hover highlight expand

【解决方案1】：

如果你有比这个特性需要的更多的 javascript，jQuery 是合理的，它会派上用场。使用 jQuery，它会类似于

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

    });

【讨论】：

【解决方案2】：

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。哦，好吧，无论如何我都会留下我的答案。

【讨论】：

标准浏览器的好解决方案，不确定 IE 是否会正确。你测试过跨浏览器吗？
在 IE8 中看起来不错，但是当我切换到 IE7 模式时它停止工作。虽然我有一种预感，如果你使用 'a' 标签而不是 div，它也可以在 IE7 中使用。

【解决方案3】：

处理这个问题的唯一真正的跨浏览器方法是使用 Javascript，因为不幸的是，许多旧浏览器不支持 :hover 伪类在锚元素以外的任何东西上。

您可能想查看 MooTools 的 Fx.Slide 效果，或者其他所有人都提到的 JQuery。

【讨论】：

【解决方案4】：

我可能也只使用 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>

请注意，只有在启用 JavaScript 时才会隐藏行内容，这是一个重要的（并且经常被忽略！）可访问性方面。

【讨论】：

【解决方案5】：

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

【讨论】：