HTML5 내역/요약 상단에서 닫기 닫기 하단에서

HTML5의 요약/세부 정보 태그를 사용하여 문서 페이지에 추가 텍스트를 숨기거나 표시하고 있습니다. 추가 텍스트가 길어서 요약 태그의 열기/닫기 특성은 요약 행을 클릭하여 세부 정보 블록을 열거 나 닫도록해야한다는 것입니다. 즉, 긴 텍스트의 길이만큼 아래로 스크롤 한 다음 요약 태그까지 스크롤하여 닫으려면 클릭해야합니다.HTML5 내역/요약 상단에서 닫기 닫기 하단에서

세부 정보 세그먼트의 맨 아래를 클릭하여 닫을 수 있습니다. CSS를 사용하여 세부 세그먼트의 맨 아래에 '닫기'삼각형을 추가 할 수 있습니다. 세부 블록을 닫기 위해 삼각형을 클릭하게하려면 무엇을 할 수 있습니까?

details[open]:after { 
    content:'▲'; 
}

출처

2017-03-14 kevdev

나는 CSS를 사용하여 수행 할 수 있다고 생각하지 않습니다. 하지만 당신은 자바 스크립트를 사용할 수 있습니다 :

<!DOCTYPE html> 
<html> 
<body> 

<script> 
function closeDetails() { 
    document.getElementById("details").removeAttribute("open"); 
    window.location = "#details"; 
} 
</script> 

<details id="details"> 
    <summary>Show Details</summary> 
    <p>yadda yadda</p> 
    <button onclick="closeDetails()">Close Details</button> 
</details> 

</body> 
</html>

출처

2017-03-14 21:12:55 sartoris

! 이상한. Safari, FireFox 및 Chrome에서 이러한 방식으로 작동합니다. 그것은 세부/요약 태그가 구현 된 방법 (또는 spec'd)에 대한 잘못이라고 생각됩니다. 종료 한 후에는 시작한 곳에서 끝나야합니다. – kevdev

가 javascript 함수에 추가되었습니다. window.location = "#details"; – sartoris

감사하지만 그게 도움이되지 못했습니다. – kevdev

다른 답변이 없기 때문에 나는 Sartoris를 올바른 것으로 표시 할 것입니다.

다른 누군가가 사용하고 싶어하는 경우에는 페이지에 하나 이상의 '세부 정보'요소와 함께 사용할 수 있도록 비트를 조금 더 화려하게 표현할 수있는 자유를 썼습니다. 이러한 방식으로 동일한 기능과 닫기 버튼 정의가 각각의 '세부 사항'블록에 대해 고유 한 ID를 갖는 한 사용할 수 있습니다.

세부 닫 차단하는 경우가 여전히 페이지에서 아래로 위치하는 불행한 효과가 지금 당신이 아직 읽지 않은 텍스트를 다시 스크롤해야

<!DOCTYPE html> 
<html> 
<body> 

<script> 
function closeDetail(detailsElement) { 
    detailsElement.removeAttribute("open"); 
    window.location = '#' + detailsElement.id; 
} 
</script> 

<details id="details"> 
    <summary>Show Details</summary> 
    <p>yadda yadda</p> 
    <button onclick="closeDetail(this.parentElement)">▲</button> 
</details> 

</body> 
</html>

출처

2017-03-16 15:54:57 kevdev

HTML5 내역/요약 상단에서 닫기 닫기 하단에서

답변

관련 문제