移动设备上的 JQuery 按钮 CSS

Question

我正在尝试在打开/关闭 div 时更改按钮样式 (http://codepen.io/arr0w/pen/QGwazY) 它在 PC 上的 Chrome 中完美运行。但是，如果我在 Android 或 iPad 上尝试使用 codepen，.button 的颜色在 .div 关闭时不会改变。直到我点击按钮区域的外部。

怎么了？

$(document).ready(function() {

  $(".button").click(function() {
    if (!$(".div").is(':visible')) {
      $(".button").css('background', '-webkit-linear-gradient(top, #0065b3, #009ccc)')
        .css('background', '-moz-linear-gradient(top, #0065b3, #009ccc)').css('background', '-o-linear-gradient(top, #0065b3, #009ccc)').css('background', '-ms-linear-gradient(top, #0065b3, #009ccc)').css('background', 'linear-gradient(top, #0065b3, #009ccc)').css('background', '-webkit-gradient(linear, left top, left bottom, from( #0065b3), to( #009ccc)')
    };

    $(".div").stop().slideToggle(300, function() {
      if (!$(".div").is(':visible')) {
        $(".button").css('background', '-webkit-linear-gradient(top, #0673e0, #00b0e6)')
          .css('background', '-moz-linear-gradient(top, #0673e0, #00b0e6)').css('background', '-o-linear-gradient(top, #0673e0, #00b0e6)').css('background', '-ms-linear-gradient(top, #0673e0, #00b0e6)').css('background', 'linear-gradient(top, #0673e0, #00b0e6)').css('background', '-webkit-gradient(linear, left top, left bottom, from( #0673e0), to( #00b0e6)')

      }
    });
  })
});

/* Checkbox style*/

input[type="checkbox"] {
  height: 20px;
  width: 20px;
  margin-top: 5px;
  margin-left: 10px;
  padding-left: 10px;
}
/* Expanding Div style */

.div {
  display: block;
  height: 10%;
  width: 60%;
  padding-top: 30px;
  padding-bottom: 30px;
  background: #ffff;
  border: 2px solid #003867;
  border-top: 0px;
  margin-left: 20%;
  margin-right: 20%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 30px 0px 30px 0px;
  -khtml-border-radius: 30px 0px 30px 0px;
  -moz-border-radius: 30px 0px 30px 0px;
  border-radius: 0px 0px 30px 30px;
  position: relative;
  top: -20px;
  z-index: -1;
}
/* Button style */

.button {
  display: block;
  height: 10%;
  width: 60%;
  background: #34696f;
  border: 2px solid #003867;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  margin-left: 20%;
  margin-right: 20%;
  /*Button text*/
  color: #003867;
  text-align: center;
  font: bold 3.2em/100px Aller, sans-serif;
  /*Fancy CSS*/
  background: #0082e6;
  background: -webkit-linear-gradient(top, #0673e0, #00b0e6);
  background: -moz-linear-gradient(top, #0673e0, #00b0e6);
  background: -o-linear-gradient(top, #0673e0, #00b0e6);
  background: -ms-linear-gradient(top, #0673e0, #00b0e6);
  background: linear-gradient(top, #0673e0, #00b0e6);
  /*Borders and shadows*/
  -webkit-border-radius: 30px;
  -khtml-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 0 6px 0 #004680;
  -moz-box-shadow: 0 6px 0 #004680;
  box-shadow: 0 6px 0 #004680;
  text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
.button:hover,
.button:active {
  background: linear-gradient(top, #0065b3, #009ccc) !important;
  background: -webkit-linear-gradient(top, #0065b3, #009ccc) !important;
  background: -moz-linear-gradient(top, #0065b3, #009ccc) !important;
  background: -o-linear-gradient(top, #0065b3, #009ccc) !important;
  background: -ms-linear-gradient(top, #0065b3, #009ccc) !important;
  background: linear-gradient(top, #0065b3, #009ccc) !important;
}
.button:active {
  box-shadow: 0 3.5px #002a4d;
  transform: translateY(4px);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!--<a href="#" class="button">Nybygger</a>-->
<button class="button">Button</button>
<div style="display:none;" class="div" id="div">
  <input type="checkbox" class="checkbox" name="box1">
  <br>
  <input type="checkbox" class="checkbox" name="box2">
  <br>
  <input type="checkbox" class="checkbox" name="box3">
  <br>
  <input type="checkbox" class="checkbox" name="box4">
  <br>
  <input type="checkbox" class="checkbox" name="box5">
  <br>
</div>

Answer 1

我相信它是您为按钮设置的悬停样式。在移动设备上关闭时触发，当您单击离开时它会消失，删除它会使其恢复到移动设备上的正常状态。

您可以删除按钮的悬停样式并使用媒体查询设置为正常渐变。

这里是代码笔链接：http://codepen.io/saa93/full/JboMQE/

以及我更改的代码而不是

.button:hover , .button:active {
 }

添加这个

    @media only screen and (min-width:768px) {
    .button:hover {
    background: linear-gradient(top, #0065b3, #009ccc) !important;
    background: -webkit-linear-gradient(top, #0065b3, #009ccc) !important;
    background: -moz-linear-gradient(top, #0065b3, #009ccc) !important;
    background: -o-linear-gradient(top, #0065b3, #009ccc) !important;
    background: -ms-linear-gradient(top, #0065b3, #009ccc) !important;
    background: linear-gradient(top, #0065b3, #009ccc) !important;
    }
    }
    .button:active {
    background: linear-gradient(top, #0065b3, #009ccc) !important;
    background: -webkit-linear-gradient(top, #0065b3, #009ccc) !important;
    background: -moz-linear-gradient(top, #0065b3, #009ccc) !important;
    background: -o-linear-gradient(top, #0065b3, #009ccc) !important;
    background: -ms-linear-gradient(top, #0065b3, #009ccc) !important;
    background: linear-gradient(top, #0065b3, #009ccc) !important;
    }

希望这会有所帮助。