소스코드 중복 관련해서 문의드립니다.
본문
안녕하세요 소스코드 중복관련해서 문의 드립니다.
<input id="check-box" type="checkbox" />
<label for="check-box"> 111 </label>
클릭하면
<div class="check-meun">
<div class="check-co">
sadsadsadasd
</div>
</div>
이부분이 나오게끔 해놨습니다.
문제는
<li>
<span>2</span>
<input id="check-box" type="checkbox" />
<label for="check-box"> 2222 </label>
</li>
이렇게 2번째에도check-meun부분을 넣어야지만 222클릭시 check-meun 이css가 나오는데
check-meun 이부분을 1번만 넣는 방법은 없을까요?
<style>
#check-box { display: none; }
#check-box:checked + .check-meun { display: block; }
.check-meun {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba( 1, 1, 1, 0.5 );
z-index: 999;
}
.check-co {
z-index: 999;
padding: 60px 0 100px;
left: 0;
top: 0;
width: 100%;
height: 430px;
background-color: #fff;
}
.block2 { padding:0 5px; height:24px; overflow:hidden; background:#fff; width:100px; font-size:12px;}
.block2 ul, .block2 li {height:30px;margin:0; padding:0; list-style:none;}
.block2 li a {display:block; height:24px; line-height:24px; color:#555; text-decoration:none;}
.block2 li span {padding:2px 5px; background:#d81f25; color:#fff; font-weight:bold; margin-right:3px;}
</style>
<div class="block2">
<ul id="ticker1">
</li>
<li>
<span>1</span>
<input id="check-box" type="checkbox" />
<label for="check-box"> 111 </label>
<div class="check-meun">
<div class="check-co">
sadsadsadasd
</div>
</div>
</li>
<li>
<span>2</span>
<input id="check-box" type="checkbox" />
<label for="check-box"> 2222 </label>
</li>
</ul>
</div>
<script>
$(function() { var ticker = function() { setTimeout(function(){ $('#ticker1 li:first').animate( {marginTop: '-20px'}, 400, function() { $(this).detach().appendTo('ul#ticker1').removeAttr('style'); }); ticker(); }, 5000); }; ticker(); });
</script>
답변 1
별도 id값을 넣어 해당 부분에 들어가게 처리하시면 해당 위치만 들어가게 되도록 처리될겁니다.
예시를 조금 알수있을까요 ?
<li id="chk_1">
<span>1</span>
<input id="check-box" type="checkbox" />
<label for="check-box"> 111 </label>
<div class="check-meun">
<div class="check-co">
sadsadsadasd
</div>
</div>
</li>
<li id="chk_2">
<span>2</span>
<input id="check-box" type="checkbox" />
<label for="check-box"> 2222 </label>
</li>
이렇게 li 값이나 사이에 <label> 아래에 <span id="chk_1~"></span>
이라는 기준으로 해당 id값 기준으로 해당 chek-menu 의 값이 들어가게 처리하시면 될듯 합니다.
css 부분은
#check-box { display: none; }
#check-box #chk_1 #chk_2:checked + .check-meun { display: block; }
이렇게 처리를 해야할까요~?
아니요 스크립트로 처리하셔야 합니다.
아 스크립트는 아예 몰라서 ㅜㅜ
정말 죄송하지만 예시라도 알려주실수있으실까요 ㅠㅠ?
답변을 작성하시기 전에 로그인 해주세요.
