In the previous topic, with your help, we implemented a functional that allows you to collapse-expand a block when you click on the arrow. Now I am interested in the question: how to make a drop-down list for mobile devices not by taboo, but by swipe up and down? I have hooked up the hammer.js library for this . Here's what I sketched, but for now I can't

var myElement = document.getElementById('bottom-arrow'); var hammertime = new Hammer(myElement); hammertime.on('swipe', function(ev) { console.log(ev); $(this).toggleClass('toggled'); $('#fix-bot').toggle('slow'); }); 
 #bottom { position: fixed; width: 100%; bottom: 0; background: rgba(153, 0, 0, 0.8); text-align: center; } #fix-bot { height: 50px; } #fix-bot p { color: #fff; } #bottom-arrow { width: 100%; pointer-events: none; height: 23px; background: rgba(153, 0, 0, 0.8); } #bottom-arrow:before { pointer-events: all; content: "\f107"; font-family: 'FontAwesome'; color: #fff; font-size: 50px; font-weight: 400; line-height: 17px; transition: transform linear 0.5s; display: inline-block; } #bottom-arrow.toggled:before { content: "\f106"; } body { margin: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div id="bottom"> <div id="bottom-arrow"></div> <div id="fix-bot"> <p>Контейнер</p> </div> </div>

  • one
    I think the problem is in the property pointer-events: none; for #bottom-arrow for which you want to make a swipe ! - Ihor Tkachuk
  • @Igor Tkachuk is probably a good guess, but for some reason here tap works like a click jsfiddle.net/JfGVE/1354 and here svayp doesn’t work at all jsfiddle.net/JfGVE/1355 - Vasya
  • one
    Hammer.js important for Hammer.js ? I took the first example I got from Docs and everything works jsfiddle.net/6ckv4xnn . Only swipe horizontal! - Ihor Tkachuk
  • @Igor Tkachuk hmm .. are you trying on an emulator or on a mobile phone? in my smartphone and this example does not work .. - Vasya
  • one
    According to the idea, you need to set the direction property mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL }); but something is not working. Search the docks! - Ihor Tkachuk

0