1
프로젝트에 대해 CSS & jQuery를 사용하여 간단한 토글을 사용하려고합니다. 내 문제는 한 항목이 열려 있고 다른 항목이 클릭되었을 때입니다. 이 아이콘을 클릭하면 아이콘이 변경되어 사용자가 펼치거나 접을 수 있음을 볼 수 있습니다 (+ -). 하나를 클릭하면 열려있는 아이콘이 원하는대로 닫히지 만 아이콘은 닫힌 아이콘의 경우 +로 다시 변경되지 않습니다.간단한 CSS 및 jQuery로 토글하여 상태 표시 아이콘과 관련된 문제!
도스 누구나 그 해결책이 있습니까 ??
내 파일은 다음과 같습니다 :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<title>Simple Toggle with CSS & jQuery by Soh Tanaka</title>
<style type="text/css">
.container {
width:200px;
min-height:490px;
position:absolute;
top: 120px;
left:810px;
background-color:#f4f3f3;
padding:5px;
}
h2.trigger {
padding: 0 0 0 20px;
margin: 0 0 5px 0;
background: url(pics/PlusMinus.gif) no-repeat;
height: 16px;
line-height: 16px;
width: 250px;
font-size: 16px;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #000;
}
h2.active {
background-position: left bottom;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Slide up and down & toogle the Class on click
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
$(this).siblings().next("div.toggle_container").toggleClass("active").slideUp("slow");
});return false;
})
</script>
</head>
<body>
<div class="container">
<h2 class="trigger"><a href="#">Property</a></h2>
<div class="toggle_container">
<a href="#" id="">1</a><br />
<a href="#"id="">2</a>
<br />
<a href="#" id="">3</a>
<br /> <br />
</div>
<br /><br />
<h2 class="trigger"><a href="#">Hotel</a></h2>
<div class="toggle_container">
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
<br /><br />
<h2 class="trigger"><a href="#">Other</a></h2>
<div class="toggle_container">
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
</body>
</html>
난 당신이 도움이 될 수 있기를 바랍니다.
감사 사라
관련 코드 만 게시하면 더 많은 답변을 얻을 수 있습니다. 예를 들어, 스타일 정보는 필요하지 않습니다. –