Jquery 如何切换"；a「；标记元素以显示隐藏的div，就像Facebook通知中心一样

在我的源代码中，我有两个

a

元素，我想切换以显示一个隐藏的div，每次显示一个内容。就像点击图标时Facebook通知中心的运作方式一样，我认为，你们所有人至少都与Facebook网站左上角靠近徽标的Facebook通知中心进行了互动。他们是如何锻炼的

下面是我的代码

    <style>
    div, a {
        display: block;
    }

    body {
        width: 500px;
        margin: 100px auto;
    }

    a {
        border: 1px solid #ccc;  
        background: #ececec;  
        -webkit-border-radius: 3px;  
        padding: 5px 20px;  
        text-align: center;
        color: red;
        text-decoration: none;
    }

    #one {
        margin-bottom: 30px;
    }

    .dn_js {
        display: none;
    }

    .db_js {
        display: block;
    }

</style>

a组{
显示：块；
}
身体{
宽度：500px；
保证金：100像素自动；
}
a{
边框：1px实心#ccc；
背景:#ececec ;；
-webkit边界半径：3px；
填充：5px20px；
文本对齐：居中；
颜色：红色；
文字装饰：无；
}
#一个{
边缘底部：30px；
}
.dn_js{
显示：无；
}
.db_js{
显示：块；
}

这是我的HTML

    <div class="wrap">
    <div id="one">
        <a href="#" data-open="frdz" class="aTggl active">Friends</a>
        <div id="frdz" class="innerWrap dn_js">Mike</div>
    </div>
    <div id="two">
        <a href="#" data-open="Ntfn" class="aTggl">Noticiations</a>
        <div id="Ntfn" class="innerWrap dn_js">Peter</div>
    </div>
</div>

迈克
彼得

下面是我的jQuery代码

  <script type="text/javascript">
    $(document).ready(function (e) {
        $(".aTggl").on("click", function(e) {
            e.preventDefault();
            var $this = $(this);

            $(".active").removeClass("active");

            $this.addClass("active").parent().siblings().children(".innerWrap").addClass("dn_js");

            var content_show = $(this).data("open");
            $("#"+content_show).addClass("db_js"); 
        });
    });
  </script>

$（文档）.ready（函数（e）{
$（“.aTggl”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var$this=$（this）；
$（.active”）.removeClass（“active”）；
$this.addClass（“active”）.parent（）.sibbins（）.children（.innerWrap”）.addClass（“dn_js”）；
var content_show=$（此）.data（“打开”）；
$（“#”+content_show）.addClass（“db#js”）；
});
});

就像mg007指出的那样，现在您可以更好地使用toggle（）和toggleClass（）

小提琴：

---

但是你的html在哪里，也许一个小的JSFIDLE演示会有所帮助。我已经添加了我的html。对不起，我没有意识到一开始我没有包括它。我已经为你创造了这个小提琴，现在请描述你喜欢发生的动作。实际上，单击隐藏的div就会出现。如果你想得到帮助，不要指望人们先访问facebook来猜你想要什么。：）为什么要吃意大利面条？为什么不直接使用？谢谢@smb的帮助和建议：）。我想要的是，当用户单击那些

a

标记元素中的任何一个时，单击的

a

标记元素应该是活动的，其隐藏的DIV显示内容。单击相同的

标记元素应该能够在打开和关闭内容的情况下切换其各自的DIV。如果单击另一个
a
标记元素，则另一个
a
标记不应处于活动状态，其DIV元素应隐藏。感谢您的时间和回答@smb。让我编辑我的代码，让它工作。
var switchToggle = function (toggleEle) {
    $('#' + $(toggleEle).data('open')).toggle('slow', function() {
        // Animation complete.
          $(this).parent().children('.aTggl').toggleClass('active');
    });
 }

$('.aTggl').click(function(e) {
    e.preventDefault();
    switchToggle($(this));

    if (!$(this).hasClass('active')) {
        $('.active').each(function() {
          switchToggle($(this));
        });
    }
});