Question

所以我有一个简单的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的其余部分，否则我希望它留下来。

Answer 1

我补充说：

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

小提琴：http://jsfiddle.net/eBaKp/1/

<小时/> Event.stopPropagation()阻止点击事件（或其他事件，例如mouseover）冒泡到父母，导致他们的事件被触发。

jQuery手风琴菜单和复选框问题

1 个答案: