防止下拉菜单立即显示

时间:2017-11-02 21:09:41

标签: jquery html

在我的网站上,我有一个接受或拒绝朋友请求的按钮。如何防止在我点击“接受”按钮后立即显示下拉菜单。

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();


  });

https://jsfiddle.net/foc0vh0q/

2 个答案:

答案 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");检查代码段

&#13;
&#13;
//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;
&#13;
&#13;

Fiddle Link