JS 초급 단계 :이 JSfiddle을 복제 할 수 없습니다.

Question

페이지가 2로 나누어 진 개인 웹 사이트를 만들고 있습니다. 왼쪽을 클릭하면 왼쪽 부분이 오른쪽으로 확장되고 그 반대의 경우도 마찬가지입니다.

버튼을 클릭하면 버튼이 모든 것을 재설정 할 수 있습니다. 그것은이 JSFiddle에서 잘 작동 : http://jsfiddle.net/davidThomas/CFNUJ/1/

그러나 나는 (http://guillaumeb.com/jsfiddle/split.html)

은 "모두보기"버튼을 아무것도하지 않습니다 ...

이 또한 내가 눈치 복제 할 수 JQuery와의 최신 버전 원래 예제처럼 v 1.x를 사용하도록 전체 작업을 중단하십시오.

내 JS 기술은 매우 제한적입니다.

$('#left-bg, #right-bg').click(
 
      function(){ 
 
       $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600); 
 
       $('<button class="show">Show all</button>') 
 
        .appendTo('#wrapper'); 
 
      }); 
 
     
 
     $('.show').live('click', 
 
         function(){ 
 
          $('#left-bg').animate(
 
           { 
 
            'width': '50%' 
 
           },600); 
 
          $('#right-bg').animate(
 
           { 
 
            'width': '50%' 
 
           },600); 
 
          $(this).remove(); 
 
         });

#left-bg { 
 
      position: absolute; 
 
      top: 0; 
 
      left: 0; 
 
      bottom: 0; 
 
      background-color: #000; 
 
      color: #fff; 
 
      width: 50%; 
 
      margin: 0; 
 
     } 
 
     
 
     #right-bg { 
 
      position: absolute; 
 
      right: 0; 
 
      bottom: 0; 
 
      top: 0; 
 
      background-color: #fff; 
 
      color: 000; 
 
      width: 50%; 
 
      margin: 0; 
 
     } 
 
     
 
     .show { 
 
      position: absolute; 
 
      bottom: 0; 
 
      left: 50%; 
 
      margin-left: -2.5em; 
 
      width: 5em; 
 
     }

<div id="wrapper"> 
 
     <div id="left-bg"> 
 
      <p>Left stuff</p> 
 
     </div> 
 
     <div id="right-bg"> 
 
      <p>Right stuff</p> 
 
     </div> 
 
    </div> 
 
    <div id="wrapper"> 
 
     <div id="left-bg"> 
 
      <p>Left stuff</p> 
 
     </div> 
 
     <div id="right-bg"> 
 
      <p>Right stuff</p> 
 
     </div> 
 
    </div>

Answer 1

1. 는 다음과 같은 페이지

업데이트 기능에 JQuery 라이브러리 참조를 추가합니다 : 어떤 도움이 여기에

원래 코드 감사

$(function(){ 
     $('#left-bg, #right-bg').click(
      function(){ 
      $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600); 
      $('<button class="show">Show all</button>') 
       .appendTo('#wrapper'); 
     }); 
      $(document).on('click','.show', 
           function(){ 
            $('#left-bg').animate(
             { 
              'width': '50%' 
             },600); 
            $('#right-bg').animate(
             { 
              'width': '50%' 
             },600); 
            $(this).remove(); 
           }); 
    }); 

Answer 2

은 '클릭'(이 $를 작동 할 수있다이 하나 ('. 쇼').에 ('클릭'기능() {

또는

$ (문서) CSTE 연구진을 시도, '.show', function() {

jQuery .live()가 버전 1.9에서 제거되었으므로 function.

.on() 메서드는 jQuery 객체의 현재 선택된 요소 집합에 이벤트 처리기를 연결합니다. .on() 메서드는 jQuery 1.7부터 이벤트 처리기를 연결하는 데 필요한 모든 기능을 제공합니다. 이전 jQuery 이벤트 메소드에서 변환하는 데 도움이 필요하면 .bind(), .delegate() 및 .live()를 참조하십시오. .on()으로 바인드 된 이벤트를 제거하려면 .off()를 참조하십시오. 한 번만 실행 된 이벤트를 첨부하려면 .one()을 참조하십시오.

Answer 3

감사의 말을 전하면서 ​​고맙습니다. 도움을 주셔서 감사합니다.

결국 CSS를 클릭하여 매우 작은 JS를 통해 작업을 속이기로 결정했습니다. 는 여기

https://codepen.io/thetallweeks/pen/boinE

<div class="box transform"> 
</div> 
<input type="button" id="button" value="Click Me"></input> 

    ================ 

.box { 
    background-color: #218D9B; 
    height: 100px; 
    width: 100px; 
} 

.transform { 
    -webkit-transition: all 2s ease; 
    -moz-transition: all 2s ease; 
    -o-transition: all 2s ease; 
    -ms-transition: all 2s ease; 
    transition: all 2s ease; 
} 

.transform-active { 
    background-color: #45CEE0; 
    height: 200px; 
    width: 200px; 
} 
    ================ 

$("#button").click(function() { 
    $('.transform').toggleClass('transform-active'); 
});