手风琴下拉菜单不适用于 mobile/tablet

Question

我的网站上有一个常见问题解答的手风琴下拉菜单。在移动设备上，当点击该条时，手风琴会下降然后迅速消失。我希望答案部分下拉（可能平滑过渡）并停留直到再次单击 "question" 栏，或单击另一个问题栏。我正在使用以下代码：

JS

    <script> 
$(document).ready(function(){

  $(document).on('touchstart mousedown', '.acc-btn', function(){
    // If you only want one visible at a time:
    $('.acc-container').find('.selected').not(this).removeClass('selected');

    // ^^ 'closes' everything by removing the class selected.
    // Except the one we just clicked, otherwise it wouldn't toggle—
    // the class would get removed and added back two lines down.


    $(this).toggleClass('selected');

  });

});</script>

HTML

<div class="acc-container">

<div class="acc-btn"><h1>What is Company?</h1></div>

<div class="acc-content">

<div class="acc-content-inner">

<p> Answer blah blah</p>

</div>

</div>

CSS

.acc-container {
  width:90%;
  margin:30px auto 0 auto;
  overflow:hidden;
}

.acc-btn { 
 font-family: "Oswald", sans-serif;
font-weight:lighter;
text-transform: uppercase;
padding: 5px 5px 5px 5px;
margin-bottom:3px;
height: 100%;
cursor: pointer;

}


.acc-content {
  max-height:0px;
  width:100%;
  margin:0 auto;
  overflow:hidden;
  background:#C9C8C8;
  color:#000000;
  /*-webkit-transition: all 0.35s ease-in-out 0s;
  -moz-transition: all 0.35s ease-in-out 0s;
  transition: all 0.35s ease-in-out 0s;*/
}

.selected + .acc-content {
    max-height: 700px;
}

.acc-content-inner {
  padding:30px;
}

.open {
  height: auto;
}

Answer 1

快速简便的解决方法是更换

$(document).on('touchstart mousedown',

有

$(document).on('click',

原因

您编写的代码将 open/close 逻辑附加到 touchstart 和 mousedown 事件。问题是在大多数当前的移动设备上，物理触摸用于触发触摸事件和鼠标事件。这是为了提高与不支持触摸的网站的兼容性。

这会给您带来麻烦，因为一旦一个运行，另一个就会撤消您刚刚完成的操作。

不过，您可以利用此行为，因为触摸事件也被注册为点击，这意味着处理点击事件将通过一次调用涵盖基于鼠标和触摸的设备。否则你必须创建逻辑来检查触摸事件是否在运行鼠标事件之前被处理，反之亦然。

这确实会略微改变您的行为，因为点击并不完全复制 mousedown（点击需要在触发前同时按下和释放按钮），但这是更标准的行为，我认为，您正在寻找的。

Answer 2

可能该事件被触发了两次，所以您可以做的是防止该事件在 DOM 树中冒泡：

$(document).on('touchstart mousedown', '.acc-btn', function(e){
    e.stopImmediatePropagation();
    /* ... REST OF THE CODE ... */
});

手风琴下拉菜单不适用于 mobile/tablet

Accordian Dropdown not working on mobile/tablet

javascript

css

html

accordion

dropdown

原因