jQuery on click change CSS for DIV

私は2つのボタンSHOW & HIDEを作成しました。そして内容があるDIV。私は最初のボタンの内容をクリックするとDIVは幅を広げて1番目のボタンを隠すことになり、同時に2番目のボタンが見えるようになります。jQuery on click change CSS for DIV

2番目のボタンのコンテンツDIVをクリックすると幅が縮まり、2番目のボタンが非表示になり、1番目のボタンが表示されます。しかし、それは働いていません..私を助けてください。私はjqueryの知識があまりありませんが、少し使います。

$(document).ready(function(){ 
    $("#seeall2").hide(); 

    $("#seeall").bind("click", 
    function(){ 
     $("#speakers").animate({width: 880}, 1500); 
     $("#seeall").hide(500); 
     $("#seeall2").show(500); 
    }); 

    $("#seeall2").bind("click", 
    function(){ 
     $("#speakers").animate({width: 410}, 1500); 
     $("#seeall").show(500); 
     $("#seeall2").hide(500); 
    }); 
});

これは私のHTMLです：

<div id="speakers"> 

      <a href="" id="seeall">EXPAND</a> 
      <a href="" id="seeall2">COLLAPSE</a> 


      <div id="pics-wrap"> 
content... 
      </div> 
</div>

NOW THIS http://jsfiddle.net/ajinkyax/mSjbV/ その作業を参照してください。 SOLUTION：私はSCRIPTタグから

出典

2012-05-03 STEEL

ウルのコードは問題ありません。 ..それはうまく動作します.. –

wあなたのjqueryバージョンは帽子ですか？どのブラウザをテストしていますか？ –

jqueryがドキュメントに正しくリンクされているかどうかを確認したいと思います。 – Joonas

作品罰金余分なスペースを削除：

$(document).ready(function() { 

    $("#seeall2").hide(); 

    $("#seeall").bind("click", function() { 
     $("#speakers").animate({ 
      width: 880 
     }, 1500); 
     $("#seeall").hide(500); 
     $("#seeall2").show(500); 
    }); 

    $("#seeall2").bind("click", function() { 
     $("#speakers").animate({ 
      width: 410 
     }, 1500); 
     $("#seeall").show(500); 
     $("#seeall2").hide(500); 
    }); 
});

jsfiddle

出典

2012-05-03 06:09:43 Sinetheta

助けてください、私はこれを見てみましたhttp://jsfiddle.net/ajinkyax/mSjbV/ – STEEL

これは今動作します、私はスクリプトから余分な空白を削除しました – STEEL

素早い修正を見て、いつもいいです;） – Sinetheta

完全な作業ページを....

<html> 
<head> 
    <title>Index</title> 
</head> 
<body> 

<button id="seeall" value="Show" type="button"> 
    Show</button> 
<button id="seeall2" value="Hide" type="button"> 
    Hide</button> 
<div id="speakers" style="display: none"> 
    [Your Content] 
</div> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function (e) { 
     $("#seeall2").hide(); 
     $("#seeall").bind("click", 
       function (e) { 
        $("#speakers").show().animate({ width: 880 }, 1500); 
        $("#seeall").hide(500); 
        $("#seeall2").show(500); 
       }); 
     $("#seeall2").bind("click", 
       function (e) { 
        $("#speakers").hide().animate({ width: 410 }, 1500); 
        $("#seeall").show(500); 
        $("#seeall2").hide(500); 
       }); 
    }); 

</script> 

</body> 
</html>

お楽しみください！あなたは1 anchor tagをクリックしたときには、2 anchor tags

を使用している

出典

2012-05-03 06:18:01 vrluckyin

問題があります。両方とも

$("#seeall").bind("click", and $("#seeal2").bind("click",

イベントがトリガされます。

はちょうど両方のクリックイベント

に

e.preventDefault();

を追加しようとする2 buttons代わり

<input type="button" id="seeall" value="EXPAND" /> 
<input type="button" id="seeall2" value="COLLAPSE" />

出典

2012-05-03 07:05:46

anchorのを使用してみてください。ここを参照してください：http://jsfiddle.net/mSjbV/2/

出典

2012-05-03 07:13:23 Jigs

jQuery on click change CSS for DIV

答えて

関連する問題