Как получить остальную часть абзаца для анимации на More ... link?

Question

В принципе, я не могу получить ссылку More ..., чтобы оживить высоту следующего диапазона, когда нажата ссылка, которая имеет класс "dropdown". Он просто не оживляет вообще. Он анимируется только тогда, когда он изменен на ссылку Less..., и ссылка на ссылку Less... нажимается, чтобы свернуть дополнительный контент в абзаце. Как я могу получить ссылку More... для анимации при показе содержимого? Я сейчас переделываю высоту, должен ли я делать что-то другое вместо этого?

Используя следующий JQuery код в $(document).ready(function() { });

$(".listitem").on("click", ".dropdown", function(event) { 
    event.preventDefault(); 
    var $this = $(this); 
    var type = $this.next("span").length > 0 && !$this.next("span").is(":visible") ? 'expand' : 'collapse'; 
    var theSpan = type == 'expand' ? $this.next("span") : $this.prev("span"); 
    if (type == 'expand') { 
     $this.insertAfter(theSpan); 
    } 
    else 
     $this.insertBefore(theSpan); 

    theSpan.animate({height: 'toggle'}, 250, function(){ 
     $this.text(type == 'expand' ? ' [ Less... ]' : '[ More... ]'); 
    }); 
}); 

У меня есть следующий структурированный HTML внутри ul тега (Все li теги одни и те же структуры):

<li> 
    <div class="listitem"> 
     <span style="font-weight: bold;">Headline</span> Here is some body copy for the headline that should expand with an animation when clicking on the More... link right here. <a href="#" class="dropdown red">[ More... ]</a><span class="hidden">Here is more text to be shown and it should animate when the More... link is clicked, but it currently does not!</span> 
    </div> 
</li> 

CSS:

ul 
{ 
    list-style: none outside none; 
    list-style-type: none; 
} 
ul li 
{ 
    padding: .4em; 
    margin-left: -20px; 
} 
.listitem 
{ 
    display: table; 
} 
.hidden 
{ 
    display: none; 
} 

EDIT

Вы можете увидеть проблему здесь: http://opportunityfinance.net/Test/conference-2013/highlights.html

мне нужен текст, чтобы остаться на той же линии, когда она расширяется, она не должна быть прижаты к следующей строке вниз. Есть ли способ сделать это с помощью white-space? или, возможно, display: inline ??

Answer 1

Это единственное, что я могу думать потом. Просто показывает/скрывает каждую букву по одному.

Он станет только html после того, как текст будет полностью загружен.

$(".expander").each(function(e) { 
    var expanded = false, 
     isExpanding = false, 
     $this = $(this).text("[More...]"); 
    $this.click(function() { 
     if(!isExpanding) {    
      isExpanding = true; 
      if(!expanded) { 
       var i = 0, 
        interval = setInterval(function() { 
        if(i < $this.prev().text().length) { 
         $this.prev().prev().text($this.prev().text().substring(0, i)); 
         i++; 
        } else { 
         $this.prev().prev().html($this.prev().html()); 
         clearInterval(interval); 
         isExpanding = false; 
        } 
       }, 1000/60);     
      } else { 
       var i = $this.prev().text().length - 1, 
        interval = setInterval(function() { 
        if(i >= 0) { 
         $this.prev().prev().text($this.prev().text().substring(0, i)); 
         i--; 
        } else { 
         clearInterval(interval); 
         isExpanding = false; 
        } 
       }, 1000/60); 

      } 
      expanded = !expanded; 
     } 
    }); 
}).prev().before("<span></span>").hide(); 

Demo

http://jsfiddle.net/CxX8n/9/

Answer 2

<span> является встроенным элементом, поэтому свойство height не применяется. Но вы пытаетесь переключить высоту, поэтому animate() продолжает форсировать display: inline-block, и почему он не работает в первый раз. Вместо этого попробуйте переключиться на opacity.

$(".listitem").on("click", ".dropdown", function(event) { 
    event.preventDefault(); 
    var $this = $(this); 
    var type = $this.next("span").length > 0 && !$this.next("span").is(":visible") ? 'expand' : 'collapse'; 
    var theSpan = type == 'expand' ? $this.next("span") : $this.prev("span"); 
    if (type == 'expand') { 
     $this.insertAfter(theSpan); 
    } 
    else 
     $this.insertBefore(theSpan); 

    theSpan.animate({opacity: 'toggle'}, 250, function(){ 
     $this.text(type == 'expand' ? ' [ Less... ]' : '[ More... ]'); 
    }); 
}); 

Вот JSFiddle