-1

こんにちは私は次を持っています...

 <span id="second" class="content1" style="width:0px; display:inline-block; overflow:hidden; float: left; white-space:nowrap;">
                    <p style="color:blue; background-color: #b5bdc8;">Camera Reviews</p>
                  </span>
                  <a href="#" class="slide1" style="float: left;"><li class="laptop"></li></a>

スクリプトは次のとおりです。

$(document).ready(function () {
          $('.slide1').click(function () {
          $('#second').animate({
               width: '120px',
           }, 1000);
       });
 });

問題は、リストをブロックで表示したいということです...そしてそれがそのまま機能することに加えて、リストの非表示/表示をクリックしたときにアニメーションを切り替えたいです

ここでの作業コード：http：//jsfiddle.net/gVjFs/81/

4

4 に答える 4

0

JSFiddle で、CSS をblockfor に設定していることを示しますul li。ulただし、HTML にタグがないため、これは機能しません。また、liタグの使用方法が間違っているようです。タグはタグのliようなものtdです: 親タグの外では意味がありません。の場合li、それはolまたはulタグになります。小さな円をクリックしてもらいたい場合は、小さな円の画像を使用します。また、span/aセクションをdiv. これにより、ブロックされた表示が無料で提供されます。

于 2013-02-07T16:01:34.003 に答える
0 
$(document).ready(function () {
    $('.slide1, .slide2, .slide3, .slide4, .slide5').click(function () {
        var elem = $('.' + $(this).attr('class').replace('slide','content')),
            width = elem.width();
        elem.animate({
            width: width === 0 ? '120px' : 0,
        }, 1000);
    });
});

デモ

slideすべての要素にクラスを設定することをお勧めします.slide1, .slide2, .slide3。

于 2013-02-07T16:07:06.880 に答える
0

私は危険なマークアップを無視するつもりです（とりわけ<li>内部）。<span>ここで使用できtoggle()ます：

$('.slide1').toggle(function () {
    $('#second').stop().animate({
        width: '120px',
    }, 1000);
}, function(){
    $('#second').stop().animate({
        width: '0',
    }, 1000);
});
于 2013-02-07T16:02:22.337 に答える
0

click() とtoggleClass( ) の組み合わせを使用してください 。

$("#click").click(function() {
    $(this).toggleClass('whatever');
});
于 2013-02-07T16:03:14.653 に答える