CSS трюк вместо JavaScript ... почти работает - PullRequest
Новая
       4

CSS трюк вместо JavaScript ... почти работает

1 голос
/ 06 января 2011 
    <html>
    <style type="text/css">
    h3{
        display: block !important;
    }
    h3:active{
        display: block !important;
    }
    h3 span:before{
        content: "[-]";
    }
    h3:active span:before{
        content: "[+]";
    }
    div#summary:active >  h3, h3:active ~ h4, h3:active ~ ul{
        display: none;
    }
    </style>
    <body>
    <div id="summary">
    <h3>Click to hide<span></span></h3>
    <ul><li>first</li></ul>
    <h4>title 1</h4>
    <ul><li>second</li></ul>
    <h4>title 2</h4>
    <ul><li>third</li></ul>
    <h4>title 3</h4>
    <ul><li>fourth</li></ul>
    </div>
    </body>
    </html>

Демонстрация в реальном времени: http://jsfiddle.net/BxrJz/

Это работает в Chrome и Firefox, но как мне заставить его работать в ie?Кроме того, есть ли способ заставить его оставаться в скрытом состоянии до повторного щелчка, чтобы вам не пришлось его удерживать?

Ответы [ 2 ]

2 голосов
/ 06 января 2011

Не без JavaScript ... CSS реагирует на события. Он не может изменить состояние DOM навсегда.

0 голосов
/ 06 января 2011

Это довольно классное CSS-кодирование, но с точки зрения практичности я бы переосмыслил весь метод, который вы использовали. Странно, что можно щелкнуть только по заголовку, но не по кнопке [-]. Текст скрывается только тогда, когда <h3> находится в активном состоянии, затем текст появляется снова, и это не интуитивно, не говоря уже о практическом.

Если вы намереваетесь исследовать это, Google Stu Nicholls или Suckerfish для некоторых css только скрыть / показать поведение. Учитесь у них, а затем адаптируйте их к тому, что вам нужно. Но, как сказал @Gaby, CSS не может навсегда изменить состояние объектов, только когда пользователь выполняет действие (например,: hover или: active).

В качестве дополнительной проблемы я бы добавил cursor:pointer к тегам <h3> и <span>, чтобы было понятнее, что это интерактивный элемент.

...