0

在我的源代码中，我有两个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>

这是我的 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>
4

1 回答 1

0

所以你在这里，就像 mg007 指出已经更好地使用 toggle() 和 toggleClass()

小提琴：http: //jsfiddle.net/dASdJ/2/

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));
        });
    }
});
于 2013-03-24T19:13:58.630 回答