Question

我正在创建一个包含3个不同div的动态页面（可能会增加，但现在只有3个）。它们最初是隐藏的，但是当单击链接时，将显示所选的div。我得到了这个工作，但现在我遇到的问题是我真的不知道怎么开始让它记住div打开，然后关闭打开的那个并打开新挑选的那个。

所以基本上要了解我想要发生的事情：

点击链接打开div1
Div1打开并显示
点击链接打开div2
Div1关闭，div2将显示
再次点击div1链接
Div2将关闭，div1将打开
再次点击div1链接
Div 1将关闭

到目前为止我得到的是打开/关闭，但我不知道如何做“记忆”部分，因为我对jQuery没有经验。在代码中你会看到链接链接到“＃”，我也想知道如何使页面“流动”到所选的div（在页面上较低）。

我在以下的pastebin链接上发布了我的代码： http://pastebin.com/psftzriY

提前致谢！

<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#div1toggle').click(function() {
                $('.div1').slideToggle("slow");
        });
    });
    $(document).ready(function() {
        $('#div2toggle').click(function() {
                $('.div2').slideToggle("slow");
        });
    });
    $(document).ready(function() {
        $('#div3toggle').click(function() {
                $('.div3').slideToggle("slow");
        });
    });
</script>

</head>

<body>

<a href="#" id="div1toggle">Click here DIV1</a><br>
<a href="#" id="div2toggle">Click here DIV2</a><br>
<a href="#" id="div3toggle">Click here DIV3</a><br>

<div class="div1" style="display:none;">
   <h1>Div1</h1>
   <p>Text</p>
</div>

<div class="div2" style="display:none;">
   <h1>Div2</h1>
   <p>Text</p>
</div>

<div class="div3" style="display:none;">
   <h1>Div3</h1>
   <p>Text</p>
</div>


</body>

</html>

Answer 1

获取元素的显示属性。

$('#div1toggle').css('display');

检查它是否或阻止

Answer 2

我会在open div中添加一个类，这样很容易再找到它：

//Hide the existing div and remove the class
$(".open-div").hide();
$(".open-div").removeClass("open-div");

// Now show the div that was just clicked and add the class 
myClickedDiv.show();
myClickedDiv.addClass("open-div");

Answer 3

检查：http://jsfiddle.net/hamidlab/xLzjZ/1/

隐藏所有divs，然后显示targetDiv。如果targetDiv为:visible，请将其隐藏。

jQuery显示/隐藏div切换，记住以前的选择

3 个答案: