出于各种原因,我创造了一种具有指定高度和高度的手风琴。溢出:隐藏并在点击时打开。但是,当我点击所需的按钮时,我不能让它崩溃。
这是相关的JS:
$(document).ready(
function(){
$('li.ww_slides').addClass('livequery').append('<span class="nav"></span>');
$("li.ww_slides").click(function () {
$('li.ww_slides').removeClass('active');
$(this).addClass('active');
$('span.nav').addClass('open').css('bottom','0');
});
$("span.open").click(function () {
$(this).parent().removeClass('active');
});
}
);
这是相关的css:
.ww_main_preview ul li.active { margin-bottom: 10px; padding-bottom: 10px; height: auto!important; }
.ww_main_preview ul li.active span.nav { background-position: top center; }
.ww_main_preview ul li.livequery { overflow: hidden; height: 76px; margin-bottom: 10px; padding-bottom: 10px; }
如何点击相关的span.nav.open关闭li.ww_slides?
答案 0 :(得分:4)
当您在单击处理程序中更改类时,您应该委派事件:
$("li.ww_slides").on("click", "span.open", function() {
$(this).parent().removeClass('active');
});
或者:
$(document).ready(function(){
$('li.ww_slides')
.addClass('livequery')
.append('<span class="nav"></span>')
.click(function() {
$('li.ww_slides').removeClass('active');
$('span.nav').removeClass('open');
$(this).addClass('active')
.find('.nav')
.addClass('open')
.css('bottom','0');
}).on('click', 'span.open', function(event) {
event.stopPropagation();
$(this).parent().toggleClass('active');
});
});