테스트 사이트 - 개발 중인 베타 버전입니다

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

초비입니다 2년 전 조회 1,554

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

클릭하면 

 

        
        sadsadsadasd         
    
 

이부분이 나오게끔 해놨습니다.

 

문제는

  • 2

  • 이렇게 2번째에도check-meun부분을 넣어야지만 222클릭시 check-meun 이css가 나오는데

     

     

    check-meun 이부분을 1번만 넣는 방법은 없을까요?

     

    </p>
    
    <p> <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; 
    
        }</p>
    
    <p>.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>
    
                         
    
       </p>
    
    <p>
    
    <div class="block2"> 
    
    <ul id="ticker1"> 
    
     
    
    </li> 
    
    <li>
    
    <span>1</span> 
    
    <input id="check-box" type="checkbox" />
    
    <label for="check-box"> 111 </label></p>
    
    <p> <div class="check-meun">
    
            <div class="check-co">
    
            sadsadsadasd
    
            </div>
    
        </div> 
    
      </li>  </p>
    
    <p><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></p>
    
    <p>

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

    답변 1개

    채택된 답변
    +20 포인트
    플라이
    2년 전

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

    로그인 후 평가할 수 있습니다

    답변에 대한 댓글 5개

    초비입니다
    2년 전
    예시를 조금 알수있을까요 ?
    플라이
    2년 전
    [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 의 값이 들어가게 처리하시면 될듯 합니다.
    초비입니다
    2년 전
    css 부분은
    #check-box { display: none; }
    #check-box #chk_1 #chk_2:checked + .check-meun { display: block; }

    이렇게 처리를 해야할까요~?
    플라이
    2년 전
    아니요 스크립트로 처리하셔야 합니다.
    초비입니다
    2년 전
    아 스크립트는 아예 몰라서 ㅜㅜ
    정말 죄송하지만 예시라도 알려주실수있으실까요 ㅠㅠ?

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

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

    로그인