Я пытаюсь разработать сайт, который содержит боковую панель, панель навигации и тело. Это отзывчивый сайт. В мобильном представлении, когда пользователь нажимает на значок гамбургера, открывается боковая панель, поэтому я хотел закрыть ее после того, как пользователь выполнит какое-либо событие «Касание» для элемента, кроме боковой панели, т.е. на панели тела.
Код боковой панели:
<div id="sidebar-nav" class="sidebar">
<div class="sidebar-scroll">
<nav>
<ul class="nav">
<li> Sidebar element </li>
</ul>
</nav>
</div>
</div>
код Навбара:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="brand">
</div>
<div class="container-fluid">
<div class="navbar-btn">
<button type="button" class="btn-toggle-fullwidth"><i class="fa fa-bars"></i></button>
</div>
</nav>
Код панели кузова:
<html lang="en">
<head>
</head>
<body>
<div id="wrapper">
<div class="main">
<div class = "article_view">
<!-- this is the body panel -->
</div>
</div>
</div>
</body>
</html>
Обратите внимание, что я сделал для события click. Это работает правильно.
$(".article_view").click(function(e) {
if ($("body").hasClass("layout-fullwidth offcanvas-active")) {
$("body").removeClass("layout-fullwidth offcanvas-active");
$("body").toggleClass("undefined")
}
})
Например:
Откройте youtube.com в мобильном представлении, откройте боковую панель и выполните события на теле, такие как касание или пролистывание. Боковая панель автоматически закроется. (Я хотел сделать так)
Откройте stackoverflow.com's боковую панель и выполните те же события, что и проведением пальцем или касанием. Боковая панель не закроется.
Пожалуйста, дайте мне знать, как обрабатывать сенсорные события в мобильном представлении (проведите пальцем влево, проведите пальцем вниз, проведите вправо или коснитесь).