Существует ли кросс-браузерный способ расширения текста по клику через css? - PullRequest
Новая
       37

Существует ли кросс-браузерный способ расширения текста по клику через css?

3 голосов
/ 09 мая 2009

Во-первых, вот что я хотел бы сделать: 

Row 1
Row 2
Row 3

У меня настроен код, чтобы при наведении курсора на строки 1, 2 или 3 строка выделялась. Это делается через CSS.

Я хотел бы иметь возможность (например) щелкнуть строку 1, и тогда это будет выглядеть так: 

Row 1
  Some text here
Row 2
Row 3

Этот текст будет оставаться там, пока я не нажму на другую строку, и в этот момент он исчезнет. Например, предположим, что я щелкнул следующий ряд 2. 

Row 1
Row 2
  Even more text here
Row 3

Я нашел код, который говорит об использовании javascript для этого и настройке видимости текста, но я не уверен, как я могу это сделать, не имея тонны почти дублированного кода ...

Ответы [ 5 ]

7 голосов
/ 09 мая 2009

Если у вас больше javascript, чем необходимо для этой функции, jQuery оправдан и пригодится. С jQuery это было бы что-то вроде 

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

    });
3 голосов
/ 09 мая 2009

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. Ну ладно, я все равно оставлю свой ответ.

2 голосов
/ 09 мая 2009

Я бы, вероятно, просто использовал для этого и 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, что является важным (и часто пропускаемым!) Аспектом доступности.

2 голосов
/ 09 мая 2009

Единственный реальный кросс-браузерный способ справиться с этим - это Javascript, так как, к сожалению, многие старые браузеры не поддерживали: наведение псевдо-классов на что-либо, кроме якорных элементов.

Возможно, вы захотите проверить MooTools для их Fx.Slide эффекта или, как все остальные неизменно упоминали, JQuery.

1 голос
/ 09 мая 2009

Если вам нужен простой кросс-браузерный способ, я настоятельно рекомендую вам использовать jQuery

...