0

私のソースコードには、一度にa1つずつコンテンツを含む非表示のdivを表示するために切り替えたい2つの要素があります。アイコンがクリックされたときのFacebook通知センターの動作と同じように、皆さんは少なくとも、FacebookWebサイトのロゴの近くにある左上の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 に答える