1

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

出于某种原因，当单击更多按钮时，parentsUntil 正在抓取页面中的所有 div。我只想获取 div.htmlbox 并自动设置高度，这样我就可以看到全部内容。然后单击 less 将其缩小到 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>
4

3 回答 3

1

如果你只想要那个元素，那么你不会使用parentsUntil，你会使用closest. 但是，.htmlbox根本不是你的祖先a。你需要做一些更复杂的事情。此外，您需要使用this而不是选择所有as。

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

请注意，这高度依赖于您当前的 html。如果您更改结构，则需要对其进行修改。

于 2012-09-05T14:11:27.373 回答
0

考虑将每个.htmlbox和包装.morebox在 a 中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');​

在这里更新了 JSFiddle。

我希望这有帮助！

于 2012-09-05T14:26:11.943 回答
0

在 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');
于 2012-09-05T14:15:49.167 回答