[英]jQuery Accordion Menu and Checkbox Issue
So I have a simple jQuery accordion style menu with check boxes in the header part of the menu. 因此,我有一个简单的jQuery手风琴样式菜单,该菜单的标题部分带有复选框。 This is to toggle a set of pins on a map depending on that category.
这是根据该类别在地图上切换一组图钉。
Here is the html: 这是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>
And the script: 和脚本:
$("#accordion li div").click(function(){
$(this).next().slideToggle(300);
});
$('#accordion ul:eq(0)').show();
Here is the fiddle: http://jsfiddle.net/eBaKp/ 这是小提琴: http : //jsfiddle.net/eBaKp/
If you check the box it activates the accordion for that category. 如果选中此框,它将激活该类别的手风琴。 I do not want this.
我不想这样。 I want it to stay unless they click on the rest of the that div.
我希望它保持不变,除非他们单击该div的其余部分。
I added this: 我添加了这个:
$(".pinToggles").click(function(event){
event.stopPropagation();
});
Fiddle: http://jsfiddle.net/eBaKp/1/ 小提琴: http : //jsfiddle.net/eBaKp/1/
Event.stopPropagation()
prevents a click event (or other event, such as mouseover
) from bubbling up to the parents, causing their events to fire.
Event.stopPropagation()
防止单击事件(或其他事件,例如mouseover
)冒泡到父级,从而导致其事件触发。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.