我正在使用bootstrap版本,因此我创建了一个下拉菜单,如下例所示。
button not working second time
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
问题是,当我在向下滑动时单击关闭按钮时,该栏正在关闭。
但是,当我再次点击添加愿望清单时,幻灯片显示不再显示。
我的问题不仅仅是关闭。当我点击&#39; x&#39;它应该关闭如果没有按钮,它应该在特定时间后自动关闭。
感谢。
答案 0 :(得分:2)
从关闭按钮'data-dismiss =“alert”'中删除此项,然后再添加一个点击功能,如下所示:
$(document).ready (function(){
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").slideUp(500);
});
});
$('#success-alert .close').click(function(){
$(this).parent().hide();
});
});
HTML会喜欢:
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini" >Add to Wishlist </a>
<a href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
</div>
答案 1 :(得分:1)
这个简单的技巧对我有用。使用此close.bs.alert
bootsrap的事件类型可以隐藏元素,而不是将其删除。
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).addClass('hidden');
});
或
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).hide();
});
答案 2 :(得分:0)
而不是编写完整的代码。我使用了Jquery的slideUp()
dealy()
和slideDown()
方法。
$(document).ready(function() {
$("#success-alert").hide();
$("#btn2").click(function showAlert() {
$("#success-alert").slideDown(300).delay(2000).slideUp(400);
});
});
$('#success-alert .close').click(function() {
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-options">
<input type="button" id="btn2" value="Add to wish list" />
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>