0

これを見てくれる人が必要です。jsfiddle で動作する場合もあれば、動作しない場合もあります。改善を歓迎します。

http://jsfiddle.net/hotdiggity/JBqB3/8/

<ul id="list">
 <li><a title="title" href="#">Lorem ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Consectetur adipiscing elit
  </a>
 </li>
 <li >
  <a title="title" href="#">Ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Lorem ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Ipsum dolor sit amet</a>
 </li>
</ul>​

jQueryビットは次のとおりです。

var more = $('<li><a class="more" href="">Show more</a></li>');
var less = $('<li><a class="less" href="">Show less</a></li>');

$('ul#list').children('li:gt(2)').hide();
$('ul#list').append(more);


$('.more').click(function(){
     $(this).parent().hide().siblings('li').show();
     $('ul#list').append(less);
    return false;
});

$('.less').click(function(){
     $('ul#list').children('li:gt(2)').hide();
     $('ul#list').append(more); 
    return false;
});
4

2 に答える 2

0

これを確認してください： http://jsfiddle.net/JBqB3/17/ 問題を回避する別の方法。リストからボタンを抽出したため、それがあなたが探しているものかどうかは100％わかりません（li要素自体ではない方が良い方法だと思います..もちろん、代わりにクリッカブルを使用することもできますその標準ボタン.html

<ul id="list">
 <li><a title="title" href="#">Lorem ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Consectetur adipiscing elit
  </a>
 </li>
 <li >
   <a title="title" href="#">Ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Lorem ipsum dolor sit amet</a>
 </li>
 <li>
  <a title="title" href="#">Ipsum dolor sit amet</a>
 </li>
</ul>
<button class="btn_more">show more</button>
<button class="btn_less">show less</button>

css

.btn_less{
    display:none;
}​

JS

$(document).ready(function(){
    $('ul#list').children('li:gt(2)').hide();
    $('.btn_more').click(function(){
        $('ul#list').children().show();
        $('.btn_more').hide();
        $('.btn_less').show();
    });
    $('.btn_less').click(function(){
        $('ul#list').children('li:gt(2)').hide();
        $('.btn_less').hide();
        $('.btn_more').show();
    });
});
于 2012-12-14T13:47:43.467 に答える
0

これはうまくいくようです

$(document).ready(function(){
    var more = $('<li class="more"><a href="">Show more</a></li>');
    var less = $('<li class="less" ><a href="">Show less</a></li>');

    $('ul#list').children('li:gt(2)').hide();
    $('ul#list').append(more);

    $('body').on('click','.more',function(e){
        e.preventDefault();
        $(this).remove();    
        $('ul#list').children().show();
        $('ul#list').append(less);
        return false;
    });

    $('body').on('click','.less',function(e){
        e.preventDefault();
        $(this).remove();
        $('ul#list').children('li:gt(2)').hide();
        $('ul#list').append(more);
        return false;
   });
});

削除と非表示の順序を変更したことに注意してください。

リンクとして機能するリンクを停止するだけです。100% 必要というe.preventDefault();わけではありませんが、href に # 以外のものが含まれている場合に備えて、そこに貼り付けたいと思います。詳細については、http://api.jquery.com/event.preventDefault/を参照してください。

于 2012-12-15T22:29:40.723 に答える