点击jQuery mobile(CLOSED)时按钮变小

时间:2016-02-02 18:47:35

标签: css jquery-mobile

我是jquery mobile的新手。我从互联网上获得了一些跟随/取消关注按钮的代码,它可以工作。但问题是,当我单击按钮时,按钮会更改文本,但它会变得小于旁边的另一个按钮。这是它的外观:

This is now it looks

$(document).on('click', '.followButton', function(e) {
  e.preventDefault();
  $button = $(this);
  if ($button.hasClass('following')) {
    //$.ajax(); Do Unfollow
    alert("unfollow event");

    $button.removeClass('following');
    $button.removeClass('unfollow');
    $button.text('Follow');
  } else {
    // $.ajax(); Do Follow
    alert("follow event");

    $button.addClass('following');
    $button.text('Following');
  }
});
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<div data-role="page">
  <div role="main" class="ui-content">
    <div class="ui-grid-a ui-responsive">
      <div class="ui-block-a">
        <a data-role="button" type="button" class="btn followButton" data-role="button" data-theme="b">Follow</a>
      </div>
      <div class="ui-block-b">
        <a data-role="button" type="button" class="btn" data-role="button" data-theme="a">Details</a>
      </div>
    </div>

  </div>

</div>

单击按钮后如何使按钮保持相同的大小?谢谢。

0 个答案:

没有答案