0

SHOW と HIDE の 2 つのボタンを作成しました。しかもDIV内容付き。最初のボタンのコンテンツDIVをクリックすると幅が広がり、最初のボタンが非表示になり、同時に2番目のボタンが表示されます。

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>

これを見てくださいhttp://jsfiddle.net/ajinkyax/mSjbV/ ITS WORKING NOW. 解決策 : SCRIPT タグから余分なスペースを削除しました

4

4 に答える 4

1

正常に動作します：

$(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-03T06:09:43.617 に答える
0

問題は

あなたは2つを使用していますanchor tags

いずれかをクリックするとanchor tag。両方

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

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

buttons代わりに2つを使用してみてくださいanchor

<input type="button" id="seeall" value="EXPAND" />
<input type="button" id="seeall2" value="COLLAPSE" />
于 2012-05-03T07:05:46.343 に答える
0

追加してみてください

  e.preventDefault();

両方のクリックイベントで

ここを参照してください：http://jsfiddle.net/mSjbV/2/

于 2012-05-03T07:13:23.667 に答える
0

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

<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>

楽しみ！！！

于 2012-05-03T06:18:01.827 に答える