0

jquery / javascriptはかなり新しいですが、html/cssに習熟しています...

クラス.itemの兄弟のリストがあります。それぞれが地図上のピンです。私は3つのことを達成したいと思います：

  • CSSで操作する「アクティブ」のクラスを使用して、クリック時に開閉を切り替えます
  • 1つの.itemが開いているときに、別の.itemをクリックして閉じ、新しい.itemも開きます。
  • .itemの外側をクリックすると、閉じます

IDを使用した例をいくつか見てきましたが、うまくいけば、.itemクラス、またはおそらく親ID（#map）を使用できます。

私はtoggleClass（）を使用して最初のポイントを達成しました

$('#map .item').click(function() {
    $(this).toggleClass('active');
});

簡略化されたhtml：

<div id="map">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

助けてくれてありがとう。

4

2 に答える 2

2

私が正しく理解していれば、これはうまくいくはずです：

$(function () {
    $('#map .item').click(function(evt) {
        evt.stopPropagation(); //stops the document click action
        $(this).siblings().removeClass('active');
        $(this).toggleClass('active');
    });


    $(document).click(function() {
        $('#map .item').removeClass('active'); //make all inactive
    });
});

イベントバブリングの詳細については、http： //api.jquery.com/event.stopPropagation/をご覧ください。

于 2012-10-14T11:19:55.777 に答える
0

このようなものも機能します：

$("#map .item").click(function(e) {
    var self = $(this)[0];
    $(".item").each(function(index) {
        if (self == $(this)[0])
            $(self).addClass("active");
        else
            $(this).removeClass("active");
    });
});
$("body").click(function(e) {
    if (!e.target.id == "map" || !$(e.target).parents("#map").size()) { 
        $(".item").removeClass("active");
    }
});

これが機能するフィドルの例です。

于 2012-10-14T11:29:00.930 に答える