jQuery show () 함수에 display : inline-block을 추가하는 방법은 무엇입니까?

다음과 같은 코드가 있습니다.

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");

    var id = obj.attr("rel");
    $('#' + id).show();
    obj.addClass("selected");
}

show 함수가 추가 display:block됩니다. 그러나 display:inline-block블록 대신 추가하고 싶습니다 .

대신 showCSS를 사용하여 내용을 숨기고 표시해보십시오.

function switch_tabs(obj) {
    $('.tab-content').css('display', 'none'); // you could still use `.hide()` here
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#' + id).css('display', 'inline-block');
    obj.addClass("selected");
}

사용한 후에 CSS 속성을 설정하면 .show()작동합니다. HTML 페이지에서 잘못된 요소를 타겟팅하고있을 수 있습니다.

 $('#foo').css('display', 'inline-block');

그러나 효과를 사용 .show(), .hide()하지 않는 경우 CSS 속성을 수동으로 설정하지 않는 이유는 무엇입니까?

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');

다음과 같이 show () 또는 fadeIn () 바로 뒤에 css ()를 사용하십시오.

$('div.className').fadeIn().css('display', 'inline-block');

내가 그거 했어

function showPanels()  {
    $('.panels').show("slow");
    $('.panels').css('display','inline-block');
}

매력처럼 작동합니다.

Razz의 솔루션은 .hide()and .show()메소드에는 효과가 있지만 메소드에는 효과가 없습니다 .toggle().

시나리오에 따라 CSS 클래스를 사용 .inline_block { display: inline-block; }하고 호출 $(element).toggleClass('inline_block')하면 문제가 해결됩니다.

애니메이션 표시 / 숨기기를 사용할 수 있습니다

이 같은:

function switch_tabs(obj)
{
    $('.tab-content').animate({opacity:0},3000);
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).animate({opacity:1},3000);
    obj.addClass("selected");
}

이 시도:

$('#foo').show(0).css('display','inline-block');

애니메이션을 원하고 마지막에 디스플레이 속성을 설정한다고 생각합니다. 이 경우 show()아래 표시된 것처럼 콜백을 사용하는 것이 좋습니다.

$("#my_obj").show(400,function() {
    $("#my_obj").css("display","inline-block")
}) ;

이렇게하면 두 결과를 모두 얻을 수 있습니다.

<style>
.demo-ele{display:inline-block}
</style>

<div class="demo-ele" style="display:none">...</div>

<script>
$(".demo-ele").show(1000);//hide first, show with inline-block
<script>

실제로 jQuery는 단순히 'display'속성의 값을 지우고 'block'으로 설정하지 않습니다 (jQuery.showHide ()의 내부 구현 참조)-

   function showHide(elements, show) {
    var display, elem, hidden,

...

         if (show) {
            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if (!values[index] && display === "none") {
                elem.style.display = "";
            }

...

        if (!show || elem.style.display === "none" || elem.style.display === "") {
            elem.style.display = show ? values[index] || "" : "none";
        }
    }

$ .fn.show () / $. fn.hide ()를 재정의 할 수 있습니다. 숨길 때 요소 자체에 원래 디스플레이를 저장하는 것 (예 : 속성 또는 $ .data ()); 표시되면 다시 적용하십시오.

또한 CSS를 사용하는 것이 중요합니다! 스타일 인라인 설정은 일반적으로 다른 규칙보다 강력하기 때문에 여기서는 작동하지 않습니다.

가장 좋은 것은 부모 display :inline-block이거나 divCSS 만 있는 부모를 추가하십시오 display :inline-block.

가장 좋은 방법은 셀렉터에 중요한 접미사를 추가하는 것입니다.

예:

 #selector{
     display: inline-block !important;                   
}