我正在尝试使用jQuery,这对我来说总是一场噩梦。
我有4个不同的下拉菜单,在单击元素时添加了一个类。我正在尝试使用jQuery来检查是否有任何下拉菜单具有开放类,如果是,则删除它并延迟将开放类添加到单击的其他元素。
<div class="parent-container">
<img src="http://www.placehold.it/263x263" alt="#" class="img-responsive">
<hr>
<i class="fa fa-arrow-down fa-lg xbox-toggle"></i>
</div>
<ul class="xbox-container">
<li class="price-single">
<img src="http://www.placehold.it/200x200" alt="#">
<h4>Title</h4>
<p>£39.99</p>
</li>
<li class="price-single">
<img src="http://www.placehold.it/200x200" alt="#">
<h4>Title</h4>
<p>£39.99</p>
</li>
<li class="price-single">
<img src="http://www.placehold.it/200x200" alt="#">
<h4>Title</h4>
<p>£39.99</p>
</li>
</ul>
</div> <!-- end col -->
<div class="col-lg-3">
<div class="parent-container">
<img src="http://www.placehold.it/263x263" alt="#" class="img-responsive">
<hr>
<i class="fa fa-arrow-down fa-lg playstation-toggle"></i>
</div>
<ul class="playstation-container">
<li class="price-single">
<img src="http://www.placehold.it/200x200" alt="#">
<h4>Title</h4>
<p>£39.99</p>
</li>
<li class="price-single">
<img src="http://www.placehold.it/200x200" alt="#">
<h4>Title</h4>
<p>£39.99</p>
</li>
<li class="price-single">
<img src="http://www.placehold.it/200x200" alt="#">
<h4>Title</h4>
<p>£39.99</p>
</li>
</ul>
</div> <!-- end col -->
$('.xbox-toggle').click(function() {
$('ul.xbox-container').toggleClass('price-cont-open');
if($('ul.playstation-container').hasClass('price-cont-open')){
$('ul.playstation-container').removeClass('price-cont-open');
$('ul.xbox-container').addClass('price-cont-open').delay(1000);
};
});
这是一个使用jQuery.Deferred()
的基本示例,类似于Promise ES6规范的jQuery实现。
因此,希望它能有所帮助:看看self.sleep
方法,以及它如何与promise链结合工作。。。
function ExampleCtrl($) {
var self = this;
self.ACTIVE_CLASS = 'active';
self.list = $('.example');
self.items = $('> li', self.list);
self.sleep = function(ms) {
ms = ms || 1000;
var deferred = $.Deferred();
window.setTimeout(function() {
deferred.resolve();
}, ms);
return deferred.promise();
};
self.items.click(function(event) {
event.preventDefault();
var current = $(this);
return $
.when(current.toggleClass(self.ACTIVE_CLASS))
.then(function() {
return self.sleep(3000);
})
.then(function() {
return current.next();
})
.then(function(sibling) {
return sibling.toggleClass(self.ACTIVE_CLASS);
})
;
});
}
jQuery(document).ready(ExampleCtrl);
.active {
background-color: lightseagreen;
}
ul {
display: block;
margin: 0;
padding: 0;
}
li {
display: block;
padding: .5em 1.5em;
text-transform: uppercase;
transition: 150ms all linear;
background: lightcoral;
margin: 2px 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="example">
<li class="active">Item 1</li>
<li class="">Item 2</li>
<li class="">Item 3</li>
<li class="">Item 4</li>
<li class="">Item 5</li>
<li class="">Item 6</li>
<li class="">Item 7</li>
<li class="">Item 8</li>
<li class="">Item 9</li>
</ul>