jQuery 토글 CSS?

jQuery 토글 CSS?

사용자가 버튼을 클릭할 때 CSS 간에 전환하고 싶습니다 (#user_button) 메뉴가 표시됩니다(#user_options) 및 CSS를 변경하고 사용자가 다시 클릭하면 정상으로 돌아갑니다.지금까지 제가 가진 것은 이것뿐입니다.

$('#user_button').click( function() {
    $('#user_options').toggle();
    $("#user_button").css({    
        borderBottomLeftRadius: '0px',
        borderBottomRightRadius: '0px'
    }); 
    return false;
});

누가 도와줄 수 있습니까?

1.9 이전 버전의 jQuery(jQuery)인 경우(https://api.jquery.com/toggle-event) 참조:

$('#user_button').toggle(function () {
    $("#user_button").css({borderBottomLeftRadius: "0px"});
}, function () {
    $("#user_button").css({borderBottomLeftRadius: "5px"});
});

이 경우 클래스를 사용하는 것이 css를 직접 설정하는 것보다 낫지만, 언급한 addClass 메소드와 removeClass 메소드를 살펴보십시오.

$('#user_button').toggle(function () {
    $("#user_button").addClass("active");
}, function () {
    $("#user_button").removeClass("active");
});

저는 jQuery에서 toggleClass 함수를 사용하고 CSS를 클래스에 정의할 것입니다.

/* start of css */
#user_button.active {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px; /* user-agent specific */
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px; /* etc... */
}
/* start of js */
$('#user_button').click(function() {
    $('#user_options').toggle();
    $(this).toggleClass('active');
    return false;
})

jQuery의 .addClass 및 .removeClass 명령을 사용하여 상태에 대해 두 개의 다른 클래스를 생성할 수 있습니다.이것이 저에게는 최선의 연습 방법이 될 것입니다.

이니셜 코드에는 borderBottomLeftRadius: 0px가 있어야 합니다.

$('#user_button').toggle().css('borderBottomLeftRadius','+5px');

가장 좋은 선택은 CSS에서 클래스 스타일을 설정하는 것입니다..showMenu그리고..hideMenu다양한 스타일로그러면 당신은 다음과 같은 것을 할 수 있습니다.

$("#user_button").addClass("showMenu"); 

다음과 같이 상태를 유지하여 이 작업을 수행할 수 있습니다.

$('#user_button').on('click',function(){
    if($(this).attr('data-click-state') == 1) {
        $(this).attr('data-click-state', 0);
        $(this).css('background-color', 'red')
      }
    else {
      $(this).attr('data-click-state', 1);
      $(this).css('background-color', 'orange')
    }
  });

여기 코드 펜 예제에서 참조하십시오.

$('#user_button').on('click', function() {
  $("#user_button").toggleClass('active');
});

#user_option.active {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

$(document).ready(function(){

    $('#toggle').active('click', function(){
        $(".navbar-collapse").addClass("show");
    });

    $('#toggle .active').on('click', function(){
        $(".navbar-collapse").removeClass("hide");
    });

});

Toggle(토글) 메뉴는 닫혔다가 열렸지만 Navigation(탐색) 항목은 닫히지 않았습니다.

언급URL : https://stackoverflow.com/questions/3337621/jquery-toggle-css