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

【问题标题】：jQuery show/hide div toggling, remembering previous choicesjQuery 显示/隐藏 div 切换，记住以前的选择
【发布时间】：2014-04-19 16:29:50
【问题描述】：

我正在制作一个包含 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>

【问题讨论】：

你的代码现在有什么问题？你的代码没问题]
我现在的代码很好，是的，但我希望它关闭当我点击打开另一个 div 时打开的 div。
喜欢什么？告诉我什么在你的小提琴中不起作用，Div 1 ,2 ,3 ,4 没有关闭？根据你的代码告诉具体的。
我确切地告诉了我在寻找什么，并且看到其他人理解意味着问题不在我的解释中。当您根本不理解时，不要告诉人们“要具体”..

标签： javascript jquery html show-hide

【解决方案1】：

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

隐藏所有divs，然后显示targetDiv。如果targetDiv 是:visible，则隐藏它。

【讨论】：

谢谢，这正是我要找的

【解决方案2】：

获取元素的显示属性。

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

检查它的无或 blcok

【讨论】：

【解决方案3】：

我会在打开的 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");

【讨论】：

这个想法可行，但我更喜欢专门针对 div 并处理它们的另一个想法，而不是生成类。不过谢谢！