jQuery的擴大DIV父innerHTML的高度

Question

工作原型： http://jsfiddle.net/ad5qa/K5fdZ/28/

因爲當更多的按鈕被點擊的parentsUntil被抓在頁面的所有div某種原因。我只是想獲得div.htmlbox並有高度自動，所以我可以看到完整的內容。然後點擊減少將其縮小回50px高度。任何幫助將不勝感激。

$('.morebox a').toggle(function() { 
    var $this = $(this); 
    var $parent =$this.parentsUntil('.htmlbox'); 

    $parent.height('auto') 
    $this.text('less') 
    $parent.css('border', '2px solid magenta') 
    $this.css('border', '2px solid red') 
}, function() { 
    $parent.height('50px') 
    $this.text('more') 
});​ 

<h3>Description</h3> 
<div class="htmlbox"> 
This is a samle description that goes here with short or long content in this panel. If the text is higher than 50px then it should be hidden by the box. You must click expand to view the remaining content in the html box div. The float box is used to cut off the overflow of the content. 
<div class="fade-overlay"></div> 
</div> 
<div class="morebox"> 
    <img align="absmiddle" alt="more-less grabber" src="http://goo.gl/ho277"> 
    <a href="#" style="line-height: 10px">more</a> 
    <img align="absmiddle" alt="more-less grabber" src="http://goo.gl/ho277"> 
</div> 

Answer 1

如果你只想要一個元素，那麼你就不會使用parentsUntil，你會使用closest。 然而，.htmlbox是不是你a的祖先都沒有。你需要做更復雜的事情。此外，您需要使用this而不是全選a s。

$this.closest(".morebox").prev(); 

請注意，這是高度依賴於您當前的HTML。如果您更改結構，則需要修改此結構。

Answer 2

含每個段落+更多的按鈕，在一個div然後使用下面的代碼來選擇更多按鈕：

http://jsfiddle.net/K5fdZ/44/

<div class="section">  
    <div class="htmlbox"> 
     MY_TEXT 
     <div class="fade-overlay"></div> 
    </div> 
    <div class="morebox"> 
     <img align="absmiddle" alt="more-less grabber" src="http://goo.gl/ho277"> 
     <a href="#" style="line-height: 10px">more</a> 
     <img align="absmiddle" alt="more-less grabber" src="http://goo.gl/ho277"> 
    </div> 
</div> 

var $parent = $('.morebox a').parent().find('.htmlbox'); 

Answer 3

考慮包裝各.htmlbox和.morebox一個div內，使用jQuery $。最接近（）和$ .find（）遍歷DOM，如下所示：

HTML

<div class="boxcontent"> 
    <h3>Description</h3> 
    <div class="htmlbox"> 
     ... 
    </div> 
    <div class="morebox"> 
     ... 
     <a href="#" style="line-height: 10px">more</a> 
     ... 
    </div>    
</div> 

JS

$('.morebox a').toggle(function() { 
    var $el = $(this); 
    var $parent = $el.closest('.boxcontent').find('.htmlbox'); 

    $parent.height('50px') 
    $el.text('more') 
}, function() { 
    var $el = $(this); 
    var $parent = $el.closest('.boxcontent').find('.htmlbox'); 

    $parent.height('auto'); 
    $el.text('less') 
}).trigger('click');​ 

Updated JSFiddle here。

我希望這有助於！