3

首先，这是我想做的事情：

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

4

5 回答 5

7

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

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

    });
于 2009-05-08T23:32:36.343 回答
3

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

于 2009-05-08T23:40:20.927 回答
2

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

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

于 2009-05-08T23:36:18.737 回答
2

我可能也会为此使用 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 时才会隐藏行内容，这是一个重要的（并且经常被忽略！）可访问性方面。

于 2009-05-09T14:55:58.547 回答
1

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

于 2009-05-08T23:30:01.327 回答