클릭/전환 할 때 div의 배경을 변경하십시오.

Question

안녕하세요 여러분, 클릭 할 때 "CLICK ME"텍스트 뒤에 배경을 추가하고 싶으므로 클릭하지 않을 때까지 활성 상태로 유지됩니다. 현재 슬라이드와 토글 형식이 여기에 표시되어 있지만 현재 스크립트 내에서 다른 활성 클래스를 추가 할 수있는 위치를 파악할 수 없었습니다. 가 elment 클릭 한에 활성 클래스를 추가 : 같은

http://jsfiddle.net/schermerb/rAMQT/

<div class="toggleBtn">CLICK ME</div> 
    <div class="below">OH NO IM HIDDEN</div> 

    <div class="toggleBtn">CLICK ME</div> 
    <div class="below">OH NO IM HIDDEN</div> 

    <div class="toggleBtn">CLICK ME</div> 
    <div class="below">OH NO IM HIDDEN</div> 

    <div class="toggleBtn">CLICK ME</div> 
    <div class="below">OH NO IM HIDDEN</div> 

.toggleBtn { 
    font:14px noral Futura, sans-serif; 
    color:black; 
    margin:50px; 
} 
.below { 
    background:red; 
} 

    $(document).ready(function() { 
     var content = $('.below').hide(); 
     $('.toggleBtn').on('click', function() { 
      $(this).next('.below').slideToggle(); 
      return false; 
     }); 
     //register the handler to button element inside .below 
     $('.below .close').on('click', function() { 
      //find the ancestor .below element of the clicked button 
      $(this).closest('.below').slideToggle(); 
     }); 
    }); 

Answer 1

당신은 활성 클래스 전환 할 수 있습니다 :

을 당신의 JS에서 5,

:

$('.toggleBtn').on('click', function() { 
    $(this).next('.below').slideToggle(); 

    $(this).toggleClass('active'); 
    return false; 
}); 

는 CSS합니다 ($ (이) .toggleClass ('활성') 라인을주의) :

.toggleBtn.active{ 
    background:blue; 
} 

http://jsfiddle.net/rAMQT/3/

다음

Answer 2

는 마십시오. 및 slideToggle 완료시이 클래스를 제거합니다.

자바 스크립트

$(document).ready(function() { 
    var content = $('.below').hide(); 
    $('.toggleBtn').on('click', function() { 
     var self = this; 
     $(this).addClass("active"); 
     $(this).next('.below').slideToggle(function(){ 
      $(self).removeClass("active"); 
     }); 
     return false; 
    }); 
    //register the handler to button element inside .below 
    $('.below .close').on('click', function() { 
     var self = this; 
     $(this).addClass("active"); 
     //find the ancestor .below element of the clicked button 
     $(this).closest('.below').slideToggle(function(){ 
      $(self).removeClass("active"); 
     }); 
    }); 
}); 

CSS는

.active { 
    background-color: blue; 
} 

jsFiddle

Answer 3

$(document).ready(function() { 
    var content = $('.below').hide(); 
    $('.toggleBtn').on('click', function() { 
     $(this).next('.below').slideToggle(); 
     if ($(this).hasClass('active')){ 
      $(this).removeClass('active'); 
     }else{ 
      $(this).addClass('active'); 
     } 
     return false; 
    }); 
    //register the handler to button element inside .below 
    $('.below .close').on('click', function() { 
     //find the ancestor .below element of the clicked button 
     $(this).closest('.below').slideToggle(); 
    }); 
}); 

입니다 작업 코드가있는 JSFIDDLE