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를 사용 하여이 작업을 수행하고 텍스트의 가시성을 설정하는 것에 대해 이야기하는 코드를 찾았지만 근접 복제 코드가없는 상태에서 어떻게이를 수행 할 수 있는지 잘 모르겠습니다.

도움이 되었습니까?

해결책

이 기능에 필요한 것보다 더 많은 JavaScript가있는 경우 jQuery가 정당화되며 편리합니다. 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입니다.

Mootools를 확인하고 싶을 수도 있습니다 fx. 슬라이드 효과 또는 다른 사람들이 항상 언급했듯이 jQuery.

나는 아마 이것에 대해서도 jQuery를 사용할 것입니다. 그러나 OP는 여기에 전혀 오래된 JavaScript 솔루션이라는 사실을 언급하지 않았기 때문에 FF3/Mac에서만 테스트되었지만 크로스 브라우저라고 합리적으로 확신합니다 (내가 수정하면 제가 수정하십시오. 'm 틀) :

<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