Scrolling on Mobile Accordion Menu NOT Possible

تبليغ
سؤال

يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.

تبليغ
‎إلغاء

I’m working on mobile menu adopting this piece of code, menu is nearly finished and all was working fine until I tested this on real mobile device.
All tabs are working perfectly but opens immediately when touched so scroll is not possible because whenever i touch the screen the tabs opening not allowing me to scroll.

I’ve removed e.preventDefault(); function and I was able to tap and scroll on the submenu pages when the menu is fully opened, but this is not how this menu should work.
I would like to be able to scroll the menu when finger is sliding over the screen and be able to open menu tabs when tapped. Can you guys show me the right path please?

PS.
I’ve added a bit of margin at the top so when you open this on bigger mobile phones you will have some content to scroll.

;(function($, window, document, undefined) {
var pluginName = “jqueryAccordionMenu”;
var defaults = {
speed: 300,
showDelay: 0,
hideDelay: 0,
singleOpen: true,
clickEffect: true
};

function Plugin(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}

$.extend(Plugin.prototype, {
init: function() {
this.openSubmenu();
this.submenuIndicators();
},
openSubmenu: function() {
$(this.element).children(‘ul’).find(‘li’).bind(‘click touchstart’, function(e) {
e.stopPropagation();
e.preventDefault();
if ($(this).children(‘.submenu’).length > 0) {
if ($(this).children(‘.submenu’).css(‘display’) == ‘none’) {
$(this).children(‘.submenu’).delay(defaults.showDelay).slideDown(defaults.speed);
$(this).children(‘.submenu’).siblings(‘a’).addClass(‘submenu-indicator-minus’);
if (defaults.singleOpen) {
$(this).siblings().children(‘.submenu’).slideUp(defaults.speed);
$(this).siblings().children(‘.submenu’).siblings(‘a’).removeClass(‘submenu-indicator-minus’);
}
return false;
} else {
$(this).children(‘.submenu’).delay(defaults.hideDelay).slideUp(defaults.speed);
}

if ($(this).children(‘.submenu’).siblings(‘a’).hasClass(‘submenu-indicator-minus’)) {
$(this).children(‘.submenu’).siblings(‘a’).removeClass(‘submenu-indicator-minus’);
}
}
window.location.href = $(this).children(‘a’).attr(‘href’);
})
},
submenuIndicators: function() {
if ($(this.element).find(‘.submenu’).length > 0) {
$(this.element).find(‘.submenu’).siblings(‘a’).append(‘<span class=”submenu-indicator”>+</span>’);
}
},
});
$.fn[pluginName] = function(options) {
this.each(function() {
if (!$.data(this, ‘plugin_’ + pluginName)) {
$.data(this, ‘plugin_’ + pluginName, new Plugin(this, options));
}
});
return this;
}
})(jQuery, window, document);

jQuery(‘#jquery-accordion-menu’).jqueryAccordionMenu();
* {
box-sizing: border-box;
}
body {
background: #f0f0f0;
margin: 0;

}
.content {
width: 100%;
margin: 100px 0;
}
#demo-list a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.jquery-accordion-menu, .jquery-accordion-menu * {
font-family: ‘Open Sans’, sans-serif;
box-sizing: border-box;
outline: 0;
}

.jquery-accordion-menu {
width: 100%;
float: left;
position: relative;
}

.jquery-accordion-menu .jquery-accordion-menu-footer, .jquery-accordion-menu .jquery-accordion-menu-header {
width: 100%;
height: 50px;
padding-left: 22px;
float: left;
line-height: 50px;
font-weight: 600;
color: #f0f0f0;
background: #414956;
}

.jquery-accordion-menu ul {
margin: 0;
padding: 0;
list-style: none;
}

.jquery-accordion-menu ul li {
width: 100%;
display: block;
float: left;
position: relative;
}

.jquery-accordion-menu ul li a {
width: 100%;
padding: 14px 22px;
float: left;
text-decoration: none;
color: #f0f0f0;
font-size: 13px;
background: #414956;
white-space: nowrap;
position: relative;
overflow: hidden;
transition: color .2s linear, background .2s linear;
}

.jquery-accordion-menu>ul>li.active {
color: #fff;
background: #3b424d;
}

.jquery-accordion-menu>ul>li>a {
border-bottom: solid 1px #3b424d;
}

.jquery-accordion-menu ul li a i {
width: 34px;
float: left;
line-height: 18px;
font-size: 16px;
text-align: left;
}

.jquery-accordion-menu .submenu-indicator {
float: right;
right: 22px;
position: absolute;
line-height: 19px;
font-size: 20px;
transition: transform .3s linear;
}

.jquery-accordion-menu ul ul.submenu .submenu-indicator {
line-height: 16px;
}

.jquery-accordion-menu .submenu-indicator-minus>.submenu-indicator {
transform: rotate(45deg);
}

.jquery-accordion-menu ul ul.submenu, .jquery-accordion-menu ul ul.submenu li ul.submenu {
width: 100%;
display: none;
position: static;
}

.jquery-accordion-menu ul ul.submenu li {
clear:both;
width: 100%;
}

.jquery-accordion-menu ul ul.submenu li a {
width: 100%;
float: left;
font-size: 11px;
background: #383838;
border-top: none;
position: relative;
border-left: solid 6px transparent;
transition: border .2s linear;
}

.jquery-accordion-menu ul ul.submenu>li>a {
padding-left: 30px;
}

.jquery-accordion-menu ul ul.submenu>li>ul.submenu>li>a {
padding-left: 45px;
}

.jquery-accordion-menu ul ul.submenu>li>ul.submenu>li>ul.submenu>li>a {
padding-left: 60px;
}

.jquery-accordion-menu ul li .jquery-accordion-menu-label, .jquery-accordion-menu ul ul.submenu li .jquery-accordion-menu-label {
min-width: 20px;
padding: 1px 2px 1px 1px;
position: absolute;
right: 18px;
top: 14px;
font-size: 11px;
font-weight: 800;
color: #555;
text-align: center;
line-height: 18px;
background: #f0f0f0;
border-radius: 100%;
}

.jquery-accordion-menu ul ul.submenu li .jquery-accordion-menu-label {
top: 12px;
}

.red.jquery-accordion-menu .jquery-accordion-menu-footer,.red.jquery-accordion-menu .jquery-accordion-menu-header,.red.jquery-accordion-menu ul li a {
background: #ED5565
}

.red.jquery-accordion-menu>ul>li.active>a {
background: #DA4453
}

.red.jquery-accordion-menu>ul>li>a {
border-bottom-color: #DA4453
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<div class=”content”>
<div id=”jquery-accordion-menu” class=”jquery-accordion-menu red”>
<ul id=”demo-list”>
<li class=”active”><a href=”#”><i class=”fa fa-home”></i>Home </a></li>
<li><a href=”#”><i class=”fa fa-glass”></i>Events </a></li>
<li><a href=”#”><i class=”fa fa-file-image-o”></i>Gallery </a></li>
<li><a href=”#”><i class=”fa fa-cog”></i>Services </a>
<ul class=”submenu”>
<li><a href=”#”>Web Design </a></li>
<li><a href=”#”>Hosting </a></li>
<li><a href=”#”>Design </a>
<ul class=”submenu”>
<li><a href=”#”>Graphics </a></li>
<li><a href=”#”>Vectors </a></li>
<li><a href=”#”>Photoshop </a></li>
<li><a href=”#”>Fonts </a></li>
</ul>
</li>
<li><a href=”#”>Consulting </a></li>
</ul>
</li>
<li><a href=”#”><i class=”fa fa-home”></i>System </a></li>
<li><a href=”#”><i class=”fa fa-suitcase”></i>Portfolio </a>
<ul class=”submenu”>
<li><a href=”#”>Web Design </a></li>
<li><a href=”#”>Graphics </a><span class=”jquery-accordion-menu-label”>10 </span></li>
<li><a href=”#”>Photoshop</a></li>
<li><a href=”#”>Programming </a></li>
</ul>
</li>
<li><a href=”#”><i class=”fa fa-user”></i>About </a></li>
<li><a href=”#”><i class=”fa fa-envelope”></i>Contact </a></li>
</ul>
</div>
</div>

0
X 5 أشهر 2022-07-10T12:04:12+03:00 0 إجابة 0 مشاهدات مبتدئ 0

‫أضف إجابة

تصفح
تصفح

مجهول يجيب