클릭 핸들러를 CSS 형제 선택기와 결합하면 IE에서 이상한 동작이 발생합니다.

버튼을 클릭하여 트리거되는 메뉴를 디자인하려고합니다. 사용자가 버튼을 클릭하면 버튼에 클래스를 추가하는 클릭 핸들러가 실행되고 형제 선택기를 사용하는 CSS 규칙이 메뉴를 표시합니다. 그것은 모두 내가 IE 7을 제외하고 테스트 브라우저와 8클릭 핸들러를 CSS 형제 선택기와 결합하면 IE에서 이상한 동작이 발생합니다.

IE 7에서

8에서 잘 작동, 나는이 문제가 발생하고있다 :

버튼을 클릭하면 클래스를 전환하지만 메뉴가 표시되지 않습니다 또는 마우스를 조금 움직일 때까지 사라집니다.
메뉴의 자식에 대한 CSS : 호버 선언이 없으면 메뉴가 전혀 작동하지 않습니다. 선언문에 무엇을 넣든 상관 없어요. 아니면 아무 것도 넣지 않아도 메뉴가 나타나지 않습니다.

아무도 왜 이것이 일어나고 있는지, 내가 그것에 대해 할 수있는 일을 말해 줄 수 있습니까? 메뉴에 별도의 클래스를 추가하려고 생각했지만 간단한 해결 방법이나 해결 방법이 있는지 궁금합니다. 여기 내 코드 :

<!DOCTYPE html> 
<html><head> 
<title>IE selector test</title> 
<style type="text/css"> 
button { 
    border: outset 1px #eeeeee; 
} 
button.active { 
    border-style: inset; 
} 
.menu { 
    display: none; 
    border: solid 1px #888888; 
} 
button.active ~ .menu { 
    display: block; 
} 
.menu > :hover { 
    /* For some reason, the menu doesn't work at all without this declaration */ 
} 
</style> 
</head> 
<body> 
<button type="button" id="menuButton">Menu</button> 
<div class="menu"> 
    <div>option</div> 
</div> 
<script> 
document.getElementById("menuButton").onclick = function() { 
    if (this.className) { 
    this.className = ""; 
    } else { 
    this.className = "active"; 
    } 
}; 
</script> 
</body> 
</html>

또한 http://jsfiddle.net/QKqpn/에서 테스트 할 수 있습니다.

출처

2012-03-06 Elias Zamaria

'~'는 인접 형제 선택자가 아닙니다. 그것은 일반적인 형제 선택 자입니다. 인접한 형제 선택자는'+'로 표시됩니다. – BoltClock

@BoltClock, 당신 말이 맞아요. 내 게시물을 수정했습니다. –

당신은 페이지를 다시 그리기를 강요하여 해결할 수 있습니다

document.body.className = document.body.className;

이 경우에 당신이 + (한 즉시 형제)를 사용할 수 있습니다, BTW http://jsfiddle.net/uGW4M/

를 참조 콤비 대신보다 일반적인 ~ (모든 후속의 형제) :

button.active + .menu {/* ... */}

출처

2012-03-06 21:45:18

className가 작동했습니다. +하지 않았다. 고맙습니다. 앞으로 며칠 이내에 어떻게 든 더 좋은 대답을 얻지 못하면 당신의 대답을 받아 들일 것입니다. –

'+'는 여기서 작동합니다 : http://jsfiddle.net/E7RaA/ (IE7과 IE8 모드 모두에서 IE9에서 테스트 됨). –

나는 당신의 바이올린을 시험해 보았다. + 그것이 작동하는지와 + 아무 상관이없는 것처럼 보인다. document.body.className 행 때문에 +로만 작동합니다. 내가 그걸 꺼내면 작동하지 않아. 내 메뉴의 최종 디자인을 잘 모르기 때문에 + 대신 ~을 사용하고 있습니다. –

클릭 핸들러를 CSS 형제 선택기와 결합하면 IE에서 이상한 동작이 발생합니다.

답변

관련 문제