0

我创建了 2 个按钮显示和隐藏。和一个DIV有内容的。我点击第一个按钮内容时DIV应该扩大宽度，它将隐藏第一个按钮，同时第二个按钮将变得可见。

当点击第二个按钮内容DIV应该折叠它的宽度并且第二个按钮将隐藏，并且第一个按钮将变得可见。但它不起作用..帮助我。我对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/ 它现在工作。解决方案：我从 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

完整的工作页面......

<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 回答
0

问题是

你正在使用两个anchor tags

当你点击一个anchor tag。两个都

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

事件被触发。

尝试使用两个buttons而不是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 回答