jQuery를 사용하여 토글링 사이드 바에 문제가 있습니다.

StackOverflow https://stackoverflow.com/questions/537381

문제

jQuery를 사용하여 간단한 토글링 사이드 바를 만들려고합니다. 여기서 버튼을 누르면 팽창하고 계약을 체결합니다. 버튼은 눌렀을 때 다른 유형의 버튼으로 변경됩니다. 사이드 바는 확장되지만 어떤 이유로 든 원래 위치로 다시 이동하지 않습니다. JavaScript와 HTML의 사본을 볼 수 있습니다. http://www.jqueryhelp.com/viewtopic.php?p=4241#4241

다음은 작동 코드입니다. 감사합니다 Bendeway! :디

$(".btn-slide").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "show", left: 250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

$(".active").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: 100}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
});
도움이 되었습니까?

해결책

음수로 왼쪽으로 올바른 사용 대신 시도하십시오. 또한 False를 반환하는 대신 REVERDEFAULT를 사용하는 것이 좋습니다.

$(".active").click(function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
   $(this).toggleClass("btn-slide");
});

업데이트

방금 알아 차린 또 다른 부분은 문서가 준비되었을 때 클릭 이벤트를 .active 버튼에 첨부하지만 문서를 변경 한 후에 들어오는 문서가 준비 될 때. Active 버튼이 없다는 것입니다. 여기에는 몇 가지 옵션이 있습니다.

첫 번째는 새로운 것을 사용하는 것입니다 라이브 jQuery의 특징 1.3

$(".btn-slide").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: 250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

$(".active").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
});

다른 옵션은 다른 수정 자 (예 : ID에서)에서 클릭 이벤트를 설정하는 것입니다. 

<span>News  <img src="img/overlay.png" id="sliderButton" class="btn-slide" alt="" /></span>

그런 다음 이것을 사용하여 클릭을 처리하십시오

$("#sliderButton").click(function(e){ 
  e.preventDefault();

  $(this).is('.btn-slide').each(function() {
   $("#sidebar").animate({opacity: "show", left: 250}, "slow"); 
  });

  $(this).is('.active').each(function() {
   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
  });
  $(this).toggleClass("active").toggleClass('btn-slide');  
});

또는 더 간결합니다

$("#sliderButton").click(function(e){ 
  e.preventDefault();

  var animationSettings = {opacity: "show", left: 250};
  if ($(this).hasClass('active') )
  {
    animationSettings = {opacity: "hide", left: -250};
  } 

  $("#sidebar").animate(animationSettings , "slow"); 
  $(this).toggleClass("active").toggleClass('btn-slide');  
});

내가 생각할 수있는 마지막 옵션은 클릭 이벤트를 변경 한 후 클릭 이벤트를 설정하는 것이지만 그렇게하지 않으므로 샘플을 제공하지 않을 것입니다.

마지막으로, 나는 당신의 활성 콜백에 경고를하고 활성 버튼 이벤트가 실제로 발사되고 있는지 확인합니다.

다른 팁

당신의 논리가 쓰여진 방식으로, 나는 당신이 하나를 추가하고 다른 하나를 제거 할 클릭 핸들러 내부의 두 클래스에서 '토글 래스'를해야한다고 생각합니다. 예를 들어, "활성"항목이 클릭되면 BTN-Slide 클래스를 토글 (ADD)하지만 "Active"클래스도 제자리에 두십시오.

물론 "ToggleClass"를 사용하는 대신 "AddClass"및 "RemoveClass"를 사용하여 더 명확하게 사용할 수도 있습니다.

FireBug와 같은 도구를 사용하여 DOM 내부에서 무슨 일이 일어나고 있는지 보는 것이 좋습니다.

$(document).ready(function(){

   $(".btn-slide").click(function(){
   $("#sidebar").animate({opacity: "show", left: "250"}, "slow");
   $(this).toggleClass("active");  // add class
   $(this).toggleClass("btn-slide"); // remove class
   return false;
   });   

});

$(document).ready(function(){

   $(".active").click(function(){
   $("#sidebar").animate({opacity: "hide", right: "250"}, "slow");
   $(this).toggleClass("active");  // remove class
   $(this).toggleClass("btn-slide");  // add class
   return false;
   });
});

이것은 작동합니다.

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#sidebar").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});

HTML

<div id="content">
 <a href="#" id="ec">Expand / Contract</a>
 <div id="main">
   Watch Me Shrink Or Grow
 </div>
</div>

jQuery

$(function() {
 var ecswitch = 1;
 /* prevent the annoying scroll back up thing */
 $("#ec").click(function(e) {
   e.preventDefault();
   var x = $("#main").width(); // get element width
   var y = $("#main").height(); // get element height 
   if(ecswitch == 1) {
    $("#main").animate({opacity:0, hieght:"0", width:"0"}, 1300);
    ecswitch = 0;
   } else {
     $("#main").animate({opacity:1, hieght:y, width:x}, 1300);
    ecswitch = 1;
   }
 });
});

CSS

#main { height:200px; }

설명

좋아, 나는 이것을 조금 다르게 선택했다. 이것은 실험의 높이가 200px이기 때문에 초기화되고 너비는 자동입니다. 하이퍼 링크를 클릭하면 실험이 1.3 초 안에 숨겨지고 스위치가 0으로 설정됩니다. 다시 클릭하면 1.3 초에 걸쳐 다시 등장하고 스위치가 1으로 다시 설정됩니다. 라이트 스위치처럼 다시 설정됩니다. 간단한 페이드 나 가죽이 나를 지루하게 만들었 기 때문에 여기에 애니메이션을 사용했습니다 ...

제로 잉 앞에 요소의 너비와 높이를 얻은 이유는 너비가 100%"와 hieght :"100%"는 내 애니메이션의 폭과 높이의 100%로 설정할 것입니다. . 우리는 그것을 원하지 않습니다.

참고 : 또한 기간 동안 불투명도를 사용하고 있습니다. 페이딩에도 아주 좋습니다 :)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top