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 回答