在我的网站上,我有一个接受或拒绝朋友请求的按钮。如何防止在我点击“接受”按钮后立即显示下拉菜单。
HTML :
<div class="btn-group btn-group-xs friend-request tooltiped" data-toggle="tooltip" title="Friend request in pending">
<button type="button" class="btn btn-danger add-friend-single-btn is-pending-friend-request dropdown-toggle" data-toggle="dropdown" style="min-width:65px;" data-profile-id="1">
<i class="fa fa-user-plus"></i> Pending
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="accept-friend-request" data-friendship-id="25" data-profile-id="1"><a href="#">Accept</a></li>
<li class="deny-friend-request" data-friendship-id="25" data-profile-id="1"><a href="#">
deny</a></li>
</ul>
</div>
jquery的:
//Accept friend request profile
$('body').on('click', '.accept-friend-request', function(e){
e.stopImmediatePropagation();
if ($(this).hasClass('is-pending-friend-request')) {
e.stopPropagation();
}
var obj = $(this);
var friendship_id = parseInt(obj.attr('data-friendship-id'));
var from_user_id = parseInt(obj.attr('data-profile-id'));
obj.closest('.friend-request').find('.is-pending-friend-request').css('background', '#82b964');
obj.closest('.friend-request').find('.is-pending-friend-request').html('<i class="fa fa-check"></i> Friend <span class="caret"></span>');
obj.closest('.friend-request').find('.is-pending-friend-request').addClass('is-friend');
obj.closest('.friend-request').find('.is-pending-friend-request').removeClass('is-pending-friend-request');
//obj.closest('.friend-request').find('ul li').addClass('hidden');
obj.closest('.friend-request').find('ul .accept-friend-request').addClass('delete-friend-relation');
obj.closest('.friend-request').find('ul .delete-friend-relation').html('<a href="#">Delete</a>');
obj.closest('.friend-request').find('ul .delete-friend-relation').removeClass('accept-friend-request');
obj.closest('.friend-request').find('ul .deny-friend-request').remove();
});
答案 0 :(得分:0)
这很难看,请不要使用相同的下拉列表然后更改内容。而是尝试2个不同的下拉菜单并显示/隐藏另一个。 无论如何要修复现有代码,请添加此
obj.closest('.friend-request').removeClass('open');
您还可以缓存friendrequest以获得更好的效果
var $friendRequest = obj.closest('.friend-request');
然后
$friendRequest.something
$friendRequest.something
$friendRequest.something
$friendRequest.something
答案 1 :(得分:0)
您在此处使用data-toggle
打开下拉列表,只是在用户接受请求时更改元素的内容。您需要做的就是在用户点击接受时关闭下拉列表。当您下拉列表打开时,它会将等级open
添加到div。我们所要做的就是删除这个类$(this).closest('div').removeClass("open");
检查代码段
//Accept friend request profile
$('body').on('click', '.accept-friend-request', function(e) {
e.stopImmediatePropagation();
if ($(this).hasClass('is-pending-friend-request')) {
e.stopPropagation();
}
var obj = $(this);
var friendship_id = parseInt(obj.attr('data-friendship-id'));
var from_user_id = parseInt(obj.attr('data-profile-id'));
obj.closest('.friend-request').find('.is-pending-friend-request').css('background', '#82b964');
obj.closest('.friend-request').find('.is-pending-friend-request').html('<i class="fa fa-check"></i> Friend <span class="caret"></span>');
obj.closest('.friend-request').find('.is-pending-friend-request').addClass('is-friend');
obj.closest('.friend-request').find('.is-pending-friend-request').removeClass('is-pending-friend-request');
obj.closest('.friend-request').removeClass("open");//added this line
obj.closest('.friend-request').find('ul .accept-friend-request').addClass('delete-friend-relation');
obj.closest('.friend-request').find('ul .delete-friend-relation').html('<a href="#">Delete</a>');
obj.closest('.friend-request').find('ul .delete-friend-relation').removeClass('accept-friend-request');
obj.closest('.friend-request').find('ul .deny-friend-request').remove();
});
&#13;
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group btn-group-xs friend-request tooltiped" data-toggle="tooltip" title="Friend request in pending">
<button type="button" class="btn btn-danger add-friend-single-btn is-pending-friend-request dropdown-toggle" data-toggle="dropdown" style="min-width:65px;" data-profile-id="1" aria-expanded="false">
<i class="fa fa-user-plus"></i> Pending
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="accept-friend-request" data-friendship-id="25" data-profile-id="1"><a href="#">Accept</a></li>
<li class="deny-friend-request" data-friendship-id="25" data-profile-id="1"><a href="#">
deny</a></li>
</ul>
</div>
&#13;