1

実用的なプロトタイプ：http： //jsfiddle.net/ad5qa/K5fdZ/28/

何らかの理由で[その他]ボタンをクリックすると、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>
4

3 に答える 3

1

その1つの要素のみが必要な場合は、を使用せずparentsUntil、を使用しますclosest。 ただし、.htmlboxはあなたの祖先ではありませんa。もっと複雑なことをする必要があります。thisさらに、すべてを選択するのではなく、を使用する必要がありますa。

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

これは現在のhtmlに大きく依存することに注意してください。構造を変更する場合は、これを変更する必要があります。

于 2012-09-05T14:11:27.373 に答える
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 に答える
0

.htmlboxそれぞれを.moreboxa内でラップし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 に答える