有没有一种跨浏览器的方式来通过CSS扩展点击文本？

发布于 2024-07-19 04:17:11 字数 430 浏览 5 评论 0原文

首先，这是我想做的：

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

原文

First, here is what I would like to do:

Row 1
Row 2
Row 3

I have code setup so that when I hover over row1, 2 or 3, the row gets highlighted. This is done via css.

I would like to be able to (for instance) click row1 and then it would look like this:

Row 1
  Some text here
Row 2
Row 3

That text would stay there until I clicked on a different row at which point it would go away. For instance, let's say I clicked on row 2 next.

Row 1
Row 2
  Even more text here
Row 3

I have found code that talks about using javascript to do this and setting the visibility of the text but I'm not sure how I can do this without having a ton of near duplicate code...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绳情 2024-07-26 04:17:11

如果您的 javascript 多于此功能所需的量，那么 jQuery 是合理的，并且它会派上用场。使用 jQuery，它会是这样的

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

    });

If you have more javascript than the needed for this feature jQuery is justified and it will come handy. With jQuery, it would be something like

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

    });

回复收藏 0 原文

扎心 2024-07-26 04:17:11

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

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>

I think that's as close as you can get without using Javascript.

Edit: I think I may have misread the question, I thought he didn't want to use Javascript. Oh well, I'll leave my answer up anyway.

回复收藏 0 原文

烟燃烟灭 2024-07-26 04:17:11

处理此问题的唯一真正的跨浏览器方法是使用 Javascript，不幸的是，许多旧浏览器不支持除锚元素之外的任何内容上的 :hover 伪类。

您可能想查看 MooTools 的 Fx.Slide 效果，或者正如其他人总是提到的那样, jQuery.

回复收藏 0 原文

脸赞 2024-07-26 04:17:11

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

I would probably just use jQuery for this as well, but since the OP didn't mention that at all here is a plain-old JavaScript solution, only tested on FF3/Mac but reasonably confident it's cross-browser (please correct me if I'm wrong):

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

Notice that the row content is only hidden when JavaScript is enabled, an important (and often missed!) accessibility aspect.

回复收藏 0 原文