开发者

jquery multiple, variable height divs, show and hide

I cannot seem to get this. Everyone else examples or questions use different functions or are not variable height. In addition, they are all the same class so my other issue is adding id's to this mess....That being said Im very stuck. Ill take any advice I can get. Thank you for you help.

  $(function(){
    var slideHeight = 36; // px
    var defHeight = $('.jswrap').height();
    if(defHeight >= slideHeight){
        $('.jswrap').css('height' , slideHeight + 'px');
        $('.jsreadmore').append('<a href="#">Read More</a>');
        $('.jsreadmore a').click(function(){
            var curHeight = $('.jswrap').height();
            if(curHeight == slideHeight){
                $('.jswrap').animate({
                  height: defHeight
                }, "normal");
                $('.jsreadmore a').html('Close');
            }else{
                $('.jswrap').animate({
                  height: slideHeight
                }, "normal");
                $('.jsreadmore a').html('Read More');
            }
            return false;
        });
    }
    });

Markup:

<div class="jscontainer">
  <h4>title</h4>
      <d开发者_Go百科iv class="jswrap">
        <p>Content</p>
      </div>
</div>

<div class="jscontainer">
  <h4>title2</h4>
      <div class="jswrap">
        <p>Content</p>
      </div>
</div>        

here is the problem


Is this what you are trying to do: http://jsfiddle.net/5VdBk/?

Does it need to work with multiple slides?

Edit after noticed edit to question mentioning multiple slides:

Updated version which should handle multiple slides of varying content size http://jsfiddle.net/5VdBk/1/


Your code has a problem: defHeight is euqal to 20 and so the first if is always false and nothing happens because defHeight >= slideHeight is always false.

When you get that right you should not do this:

  $('.jsreadmore a').click(function(){

but this

  $('.jsreadmore a').live('click', (function(){

because the 'a' is appended after the dom is created and to bind events on newly created elements you need to use live

Look ath this basic fiddle http://jsfiddle.net/FmzBP/1/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜