1
다음 코드를 사용하여 블록 제목을 클릭하여 div를 토글합니다. 각 div 머리글을 클릭하여 해당 div를 표시해야합니다. 또한 div는 스스로 토글해야합니다.jquery 다른 div를 숨김으로써 DIV에 토글()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
a { color:#C30; text-decoration:none; }
#banner { width: 930px; background-color:#666; height: 500px; }
#banner ul { list-style:none; padding: 40px; }
#banner ul li { margin: 10px 0 0 0; }
#banner ul li a { display:inline-block; border:5px solid #fff; background-color:#FC9; padding:10px; font: bold italic 18px Verdana; }
.sliderContent { border:5px solid #fff; background-color:#FC9; padding:10px; min-height: 150px; display:none; margin-top:5px; }
.sliderContent a { padding:0 !important; border:none !important; }
.sliderContent a.closeButton { background:url(icon_modal_close.png) no-repeat 0 0; float:right; height:30px; width:30px; text-indent:-999px; }
</style>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.box').click(function(event){
event.preventDefault();
$(this).next('.sliderContent').toggle(function() {
$('.sliderContent').not(this).hide();
});
});
$('.closeButton').click(function(){
$(this).parent().hide();
});
});
</script>
</head>
<body>
<div id="banner">
<ul>
<li>
<a href="#" class="box">Design</a>
<div class="sliderContent">
<a class="closeButton" href="#">Close</a>
Lorem Ipsum Doner
</div>
</li>
<li>
<a href="#" class="box">Development</a>
<div class="sliderContent">
<a class="closeButton" href="#">Close</a>
Lorem Ipsum Doner
</div>
</li>
<li>
<a href="#" class="box">Graphics</a>
<div class="sliderContent">
<a class="closeButton" href="#">Close</a>
Lorem Ipsum Doner
</div>
</li>
</ul>
</div>
</body>
</html>
이제는 DIV hide() 기능에 문제가 있습니다. toggle 함수가 먼저 실행되고 hide() 함수가 실행됩니다. 그것은 잠시 동안 두 div가 화면에 표시 될 때처럼 내 레이아웃을 왜곡시킵니다.
div가 먼저 숨기고 현재 div가 나타납니다.
도와주세요.
감사 록쉬 야다 브
:) 감사에게 많은 알렉스 내 인생을 저장하기위한 :) –
클라이언트의 요구 사항입니다 바뀌 었습니다. 이제 블록을 클릭하면 상자 자체가 확장됩니다. 그 상자를 움직이게하기보다, 나는 li 블록의 경계선을 제거했다. 블록 자체가 클릭에서 벗어나는 것처럼 올바른 접근 방식을 제안하십시오. 당신은 내가 무엇을했는지 라이브 코드를 확인할 수 있습니다 http://jsfiddle.net/ylokesh/Jvuqa/ –
다음과 같이 : http://jsfiddle.net/Jvuqa/10/? – alexl