Question

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

出于某种原因，当点击more按钮时，parentsUntil会抓取页面中的所有div。我只想获得div.htmlbox并将高度设置为auto，以便我可以看到完整的内容。然后单击“减少”将其缩小至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。

$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 $ .closest（）和$ .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

我希望这有帮助！

jquery展开div父内部高度

3 个答案: