이전 목록 다음
채택완료

소스코드 중복 관련해서 문의드립니다.

초비입니다
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-02 (목) 11:04:49 1,831

안녕하세요 소스코드 중복관련해서 문의 드립니다.

<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번만 넣는 방법은 없을까요?

Copy 
<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>
그누보드5 영카트5 php
|

답변 1개 / 댓글 5개

채택된 답변
+20 포인트
플라이
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-02 (목) 12:28:19

별도 id값을 넣어 해당 부분에 들어가게 처리하시면 해당 위치만 들어가게 되도록 처리될겁니다.

답변에 대한 댓글 5개

초비입니다
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-02 (목) 12:45:32
예시를 조금 알수있을까요 ?
플라이
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-02 (목) 12:50:29
[code]
<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>
[/code]

이렇게 li 값이나 사이에 <label> 아래에 <span id="chk_1~"></span>
이라는 기준으로 해당 id값 기준으로 해당 chek-menu 의 값이 들어가게 처리하시면 될듯 합니다.
초비입니다
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-02 (목) 13:01:03
css 부분은
#check-box { display: none; }
#check-box #chk_1 #chk_2:checked + .check-meun { display: block; }

이렇게 처리를 해야할까요~?
플라이
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-02 (목) 13:07:49
아니요 스크립트로 처리하셔야 합니다.
초비입니다
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-02 (목) 13:09:18
아 스크립트는 아예 몰라서 ㅜㅜ
정말 죄송하지만 예시라도 알려주실수있으실까요 ㅠㅠ?

답변을 작성하려면 로그인이 필요합니다.