1

メニューのヘッダー部分にチェックボックスがあるシンプルなjQueryアコーディオンスタイルのメニューがあります。これは、そのカテゴリに応じてマップ上の一連のピンを切り替えることです。

html は次のとおりです。

<div id="mapMenu">
<ul id="accordion">
<li><div>
        <input type="checkbox" id="greenCheck" name="pinSet" value="Green"  class="pinToggles" onclick="pinSetCheck(greenSet)">Attractions
    </div>
    <ul>
        <li><a href="#">Outdoor Waterparks</a></li>
        <li><a href="#">Indoor Waterparks</a></li>
        <li><a href="#">Go-kart Track</a></li>
    </ul>
</li>
<li><div>
        <input type="checkbox" id="redCheck" name="pinSet" value="Red" class="pinToggles" onclick="pinSetCheck(redSet)">Dining & Shopping
    </div>
    <ul>
        <li><a href="#">Restaurant 1</a></li>
        <li><a href="#">Restaurant 2</a></li>
        <li><a href="#">Restaurant 3</a></li>
    </ul>
</li>
<li><div>
        <input type="checkbox" id="purpleCheck" name="pinSet" value="Purple"  class="pinToggles" onclick="pinSetCheck(purpleSet)">Groups & Meetings
    </div>
    <ul>
        <li><a href="#">Conference Room 1</a></li>
        <li><a href="#">Conference Room 2</a></li>
        <li><a href="#">Conference Room 3</a></li>
    </ul>
</li>
<li><div>
        <input type="checkbox" id="orangeCheck" name="pinSet" value="Orange"  class="pinToggles" onclick="pinSetCheck(orangeSet)">Golf
    </div>
    <ul>
        <li><a href="#">Golf Course 1</a></li>
        <li><a href="#">Golf Course 2</a></li>
        <li><a href="#">Golf Course 3</a></li>
    </ul>
</li>
<li><div>
        <input type="checkbox" id="darkBlueCheck" name="pinSet" value="Dark Blue"  class="pinToggles" onclick="pinSetCheck(darkBlueSet)">Spa</div>
    <ul>
        <li><a href="#">Spa 1</a></li>
        <li><a href="#">Spa 2</a></li>
        <li><a href="#">Spa 2</a></li>
    </ul>
</li>
</ul>
</div>

そしてスクリプト：

$("#accordion li div").click(function(){
    $(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();

これがフィドルです：http://jsfiddle.net/eBaKp/

ボックスをチェックすると、そのカテゴリのアコーディオンがアクティブになります。これいらない。そのdivの残りの部分をクリックしない限り、そのままにしておきたいです。

4

1 に答える 1

2

私はこれを追加しました：

$(".pinToggles").click(function(event){
    event.stopPropagation();
});

フィドル: http://jsfiddle.net/eBaKp/1/

Event.stopPropagation()クリック イベント (または などの他のイベントmouseover) が親にバブリングし、そのイベントが発生するのを防ぎます。

于 2013-09-18T22:09:16.137 に答える