1
아코디언 - 헤더를 대체하기 위해 서로 옆에 3 개의 div가있는 왼쪽 행을 계획 한 다음 나머지 페이지를 아래로 밀어 3 행 아래의 각 div의 내용을 엽니 다.부동 div가있는 아코디언
나는 다양한 '위치'가능성을 시도했지만 couldnt 그것은 그것을 원했던 방식으로 작동시킨다. 더 많은 CSS 문제. 아니면 아코디언을 사용하지 않는 것이 좋을까요?
jsfiddle.net/pCwxa/1
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({ collapsible: true },{ active: false });
});
</script>
<style type="text/css">
#link { background-color: grey;
float: left;
height: 300px;
width: 280px;
margin: 0 20px 80px 0px;
}
#cont { top:320px;
background-color: blue;
height: 300px;
width: 880px;
}
</style>
</head>
<body>
<div style="width:900px; height:900px; margin-left:30px; margin-bottom:; border:1px solid red; padding:0px;">
<div id="accordion">
<div id="link">
<h3><a href="#">Section 1</a></h3></div>
<div id="cont">
<p>
Blabla
</div>
<div id="link">
<h3><a href="#">Section 2</a></h3></div>
<div id="cont">
<p>
Blabla
</p>
</div>
<div id="link">
<h3><a href="#">Section 3</a></h3></div>
<div id="cont">
<p>
Blabla
</p>
</div>
<div id="link">
<h3><a href="#">Section 4</a></h3></div>
<div id="cont">
<p>
Blabla
</p>
</div>
</div>
</div>
</body>
</html>
문제가 있다고하지만 문제의 어떤 부분이 원하는 것이 아닌지 설명하지는 마십시오. 또한 사람들이 [jsfiddle] (http://jsfiddle.net)과 같은 것을 사용하면 사람들이 한 번의 클릭으로 그것을 볼 수 있기 때문에 어떤 일이 일어나고 있는지 쉽게 볼 수 있습니다. – eh9
cont-div를 처음 3 개의 link-div 아래에서 열어 보겠습니다. 이제 그 밑으로 열립니다. 절대 위치를 사용하면 페이지의 나머지 부분을 푸시 다운하지 않습니다. 저는 JS에 매우 익숙하고 CSS만으로 기본입니다. http://jsfiddle.net/pCwxa/1/ – mrgreen
다른 사람들이 질문의 본문에있는 바이올린을 맨 위 근처에 두는 것이 유용 할 것입니다. – eh9