是否有一个跨浏览器的方式来扩大通过CSS点击文本？

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

题

首先，这里是我想要做的是什么：

Row 1
Row 2
Row 3

我有代码的设置，这样，当我悬停在ROW1，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来做到这一点，设置文本的可见性代码，但我不知道我怎么能做到这一点，而无需一吨的近重复代码...

有帮助吗？

解决方案

如果你有比需要此功能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，因为不幸的是许多旧的浏览器不支持：上比锚元素以外的任何hover伪类

您可能想看看MooTools的为他们的 Fx.Slide 效果，或者大家别的总是提到的，JQuery的。

我可能只是使用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时，该行的内容只隐藏，一个重要的（而且往往错过！）无障碍方面。

如果你想这样做的一个简单的跨浏览器的方式，我会强烈建议您使用 jQuery的

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top