题
在类是由它被点击设置一个<li>
。现在,从它的父嵌套元素(<button>
)将不删除类。
预先感谢。
$(document).ready(function() {
$('.pickOne li').click(function() {
$(this).addClass('active');
});
$('.settingsCancelBtn').click(function() {
$(this).parent().parent().removeClass('active');
});
});
和HTML是像这样:
<div class="fromCamp pickOne four">
<ul class="four">
<li class="first bus"><a href="#" alt="By Bus"></a>
<div>
<p class="cmInfo">Arrive between 9 AM and 11 AM. Read these <a href="#">additional instructions</a>. <a href="#">Driving Directions</a></p>
<p><a href="#">Tilefishes</a></p>
<p><a href="#">Bluefishes</a></p>
<p><a href="#">Tigerfishes</a></p>
<button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
<button class="cmGoButton settingsSaveBtn" type="button">Save</button>
</div>
</li>
<li class="second car"><a href="#" alt="By Car"></a>
<div>
<p><a href="#">Remoras</a></p>
<p><a href="#">Tilefishes</a></p>
<p><a href="#">Bluefishes</a></p>
<p><a href="#">Tigerfishes</a></p>
<button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
<button class="cmGoButton settingsSaveBtn" type="button">Save</button>
</div>
</li>
<li class="third plane"><a href="#" alt="By Plane"></a>
<div>
<p class="cmInfo">Arrive between 9 AM and 11 AM. Read these <a href="#">additional instructions</a>. <a href="#">Driving Directions</a></p>
<p><a href="#">Tilefishes</a></p>
<p><a href="#">Bluefishes</a></p>
<p><a href="#">Tigerfishes</a></p>
<button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
<button class="cmGoButton settingsSaveBtn" type="button">Save</button>
</div>
</li>
<li class="fourth stayOver"><a href="#" alt="Staying Over"></a>
<div>
<p><a href="#">Remoras</a></p>
<p><a href="#">Tilefishes</a></p>
<p><a href="#">Bluefishes</a></p>
<p><a href="#">Tigerfishes</a></p>
<button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
<button class="cmGoButton settingsSaveBtn" type="button">Save</button>
</div>
</li>
</ul>
</div>
<div class="cmClear"></div>
</div>
解决方案
好吧,这里是发生了什么:
由于您的按钮中所含LI,当你按一下按钮,它消除了类,然后将事件继续传播,并重新应用类。
因此,它是去除;它只是重新应用瞬间。所以加
// Dont forget to put the e in function()
$('.settingsCancelBtn').click(function(e) {
$(this).parent().parent().removeClass('active');
// This is the new line!
e.stopPropagation();
});
其他提示
因此,分钟后,我张贴了这个,我的朋友提出了一个解决方案。破发点...谁知道。 :)
由于我最初选择<li>
,当我点击它的一个子以除去活性类,它去除它,然后立即再加入它。
的解决方案是选择最初<a>
(它被设置为<li>
并覆盖display:block
做同样的空间。)
li
傻我。
$(document).ready(function() {
$('.pickOne li a ').click(function() {
$(this).parent().addClass('active');
});
$('.settingsCancelBtn').click(function() {
$(this).parent().parent().removeClass('active');
});
});
不隶属于 StackOverflow