防止下拉菜单自动显示

时间:2017-11-02 12:25:06

标签: jquery html twitter-bootstrap

当我删除隐藏的'时,如何防止下拉菜单自动显示jQuery中的类:

HTML:

<div class="btn-group btn-group-xs friend-request tooltiped" data-toggle="tooltip" title="Add as friend" >
  <button type="button" class="btn btn-success add-friend-single-btn no-friend-sent dropdown-toggle" data-toggle="dropdown" data-profile-id="1">
    <i class="fa fa-user-plus"></i> Friend 
  </button>
  <ul class="dropdown-menu hidden">
    <li class="cancel-friend-request" data-profile-id="1">
      <a href="#">Cancel</a>
    </li>
  </ul>
</div>

jQuery的:

  $('body').on('click', '.add-friend-single-btn', function() {

    //Send friend request
    if($(this).hasClass('no-friend-sent')){
      var obj = $(this);
      var to_user_id = obj.attr('data-profile-id');

      obj.css('background', '#d24d33');
      obj.html('<i class="fa fa-user-plus"></i> Pending <span class="caret"></span>');
      obj.addClass('is-pending-friend-request');
      obj.removeClass('no-friend-sent');

      obj.closest('.friend-request').find('ul').removeClass('hidden');
    }

  });

https://jsfiddle.net/eaad0a44/

1 个答案:

答案 0 :(得分:0)

据我了解你需要这个。试试这个。

  $('body').on('click', '.add-friend-single-btn', function(event) {

    if ($(this).hasClass('no-friend-sent')) {
      event.stopPropagation();
    }
    //Send friend request
    if ($(this).hasClass('no-friend-sent')) {

      var obj = $(this);
      var to_user_id = obj.attr('data-profile-id');

      obj.css('background', '#d24d33');
      obj.html('<i class="fa fa-user-plus"></i> Pending <span class="caret"></span>');
      obj.addClass('is-pending-friend-request');
      obj.removeClass('no-friend-sent');
      obj.closest('.friend-request').find('ul').removeClass('hidden');
    }

  });