SEEDEMO

Question

我希望 .collpaseClass SetHieght 是幻灯片..

我希望setHeight .collpaseClass 滑动并滑动当我点击 .more-optionClass
如何使用Jquery 高度控制。

HTML

<div class="wrapmenu">
   <div class="tittle">Menu1</div>
   <div class="collapse"> xxxxxxxxxx </div>
</div>

CSS

.wrapmenu .collapse{
   background-color: #fff;
   margin-bottom: 30px;
   max-height: 100px;
   overflow: hidden;
   padding: 10px;
   border:1px solid red;
}

jquery的

$(".more-option").on('click',function(){

   //how use slideup and slide down

});

SEEDEMO

Answer 1

您可以通过以下方式执行此操作：

$(".more-option").on('click',function(){
    if($(this).('.collapse').css('max-height')=='100px')
    {
        $(this).closest('.collapse').css('max-height', '300px');
    }
    else
    {
        $(this).closest('.collapse').css('max-height', '100px');
    }
        //alert($('.collapse').css('max-height'));
});

DEMO

Answer 2

你尝试过这个：

http://api.jquery.com/slidedown/

http://www.w3schools.com/jquery/jquery_slide.asp

或者您可以通过工作示例来了解这一点。

http://www.mkyong.com/jquery/jquery-slideup-slidedown-and-slidetoggle-example/

或者你想要别的东西

在w3schools尝试这个最佳和捷径

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:'250px'});
  });
});
</script> 
</head>

<body>
<button>Start Animation</button>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;overflow:hidden">
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
</div>

</body>
</html>

如何使用jquery滑动和滑动

SEEDEMO

2 个答案:

DEMO