"more"버튼을 클릭하면 div 높이 속성을 auto로 변경하는 방법

요소 목록이 있으며 버튼을 클릭 할 때 각 요소를 확장하고 덜 버튼을 클릭 할 때 각 요소를 축소해야합니다. 하지만 더 많은 버튼을 클릭하면 모든 div가 동시에 열립니다. 또한 닫을 수 없습니다. 적은 버튼을 클릭하십시오. 당신이 var el = $(this).prev()에 var el = $('.hidi')을 변경할 때"more"버튼을 클릭하면 div 높이 속성을 auto로 변경하는 방법

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<style> 
.hidi{ 
    height:20px; 
    overflow:hidden; 
    border:1px solid red; 

    } 
</style> 
</head> 
<body> 
<div class="hidi"> 
<div class="uner-sch"> 
1 
</div> 
<div class="uner-sch"> 
2 
</div> 
<div class="uner-sch"> 
3 
</div> 
</div> 
<div class="more"> ... More +</div> 

<div class="hidi"> 
<div class="uner-sch"> 
1 
</div> 
<div class="uner-sch"> 
2 
</div> 
<div class="uner-sch"> 
3 
</div> 
</div> 
<div class="more"> ... More +</div> 

<script> 
$(".more").click(function(){ 
var el = $('.hidi'), 
    curHeight = el.height(), 
    autoHeight = el.css('height', 'auto').height(); 
el.height(curHeight).animate({height: autoHeight}, 1000), 
      $(this).text('... less -'); 


}); 
</script> 
</body> 
</html>

출처

2016-08-21 inaz

은'jquery' ----> '$ ("yourclass") CSS ({ "높이"로'css'를 사용 : "auto"})' –

잘 동작하지만 모든 div에서 작동합니다. 클릭 할 때마다이 코드를 실행하려고합니다. – inaz

이 시도 :

HTML :

<div class="container"> 
    <div class="hidi"> 
     <div class="uner-sch"> 
     1 
     </div> 
     <div class="uner-sch"> 
     2 
     </div> 
     <div class="uner-sch"> 
     3 
     </div> 
    </div> 
    <div class="more"> ... More +</div> 
</div> 

<div class="container"> 
    <div class="hidi"> 
     <div class="uner-sch"> 
     1 
     </div> 
     <div class="uner-sch"> 
     2 
     </div> 
     <div class="uner-sch"> 
     3 
     </div> 
    </div> 
    <div class="more"> ... More +</div> 
</div>

jQuery를 :

var curHeight = $('.hidi').height(); 
$(".more").click(function(){ 
    var container = $(this).parent('.container'); 
    var el = container.find('.hidi'); 
    var autoHeight = el.css('height', 'auto').height(); 
    if(el.hasClass('open')){ 
     el.removeClass('open'); 
     el.height(autoHeight).animate({height: curHeight}, 1000), $(this).text('... less -'); 
    } 
    else{ 
     el.addClass('open'); 
     el.height(curHeight).animate({height: autoHeight}, 1000), $(this).text('... more +'); 
    } 
});

동작 예 :. https://jsfiddle.net/hwunuz7b/

출처

2016-08-21 07:58:24

괜찮아요. – inaz

@inaz khahesh mikonam;) –

의미가 있습니다 : 여기에 코드입니다. 새로운 코드에서 '더 많은 버튼'은 자신의 .hidi div를 의미합니다.

근무 예 : https://jsfiddle.net/6dL5svL6/

출처

2016-08-21 07:47:31

당신은 jQuery UI를 사용하고 애니메이션을 addclass & removeclass 사용할 수 있습니다.

CSS

.open { 
    color: green; 
    cursor: pointer; 
    height: auto; 
}

$(".more").click(function() { 
    // check if it is open 
    if ($(this).hasClass('toClose')) { 
    // if open , then remove class open and add back hidi 
    $(this).prev('.open').removeClass('open').addClass('hidi', 1000); 
    // update text 
    $(this).removeClass('toClose').text('... More +') 
    } else { // if it is in closed state 
    $(this).addClass('toClose').text('... less -'); 
    $(this).prev('.hidi').addClass('open', 1000).removeClass('hidi'); 
    } 
})

JSFIDDLE

출처

2016-08-21 07:53:01 brk

"more"버튼을 클릭하면 div 높이 속성을 auto로 변경하는 방법

답변

관련 문제