سلام دوستان
من این کد رو نوشتم و کار میکنه ولی میخوام یه کد تر و تمیز با فانکشن داشته باشم
به نظر شما راهی هست برای اینکار؟
<!-- start mobile menu system -->
<section id="mobile-nav-system">
<div class="mobile-menu-div">
...
</div>
<!-- end mobile menu div -->
<div class="mobile-products-div">
...
</div>
<!-- end mobile products div -->
<div class="mobile-filter-div">
...
</div>
<!-- end mobile filter div -->
<div class="mobile-search-div">
...
</div>
<!-- end mobile search div -->
<div class="mobile-navbar">
<button id="open-mobile-menu-div" class="mobile-navbar-btn">
<i class="lnr-menu" id="open-menu-i"></i>
<span class="open-menu-span">منو</span>
</button>
<button id="open-mobile-products-div" class="mobile-navbar-btn">
<i class="lnr-layers" id="open-products-i"></i>
<span class="open-products-span">محصولات</span>
</button>
<button id="open-mobile-filter-div" class="mobile-navbar-btn">
<i class="lnr-funnel" id="open-filter-i"></i>
<span class="open-filter-span">فیلتر</span>
</button>
<button id="open-mobile-search-div" class="mobile-navbar-btn">
<i class="lnr-magnifier" id="open-search-i"></i>
<span class="open-search-span">جستجو</span>
</button>
<button style="clear: both;"></button>
</>
<!-- end mobile navbar -->
</section>
<!-- end mobile menu system -->
// <!-- mobile navigation system -->
$("#open-mobile-menu-div").click(function (e) {
e.preventDefault();
$('.mobile-menu-div').toggleClass('show');
$('.mobile-products-div').removeClass('show');
$('.mobile-filter-div').removeClass('show');
$('.mobile-search-div').removeClass('show');
$('#open-menu-i').toggleClass('lnr-menu lnr-cross');
$('#open-products-i').removeClass('lnr-cross').addClass('lnr-layers');
$('#open-filter-i').removeClass('lnr-cross').addClass('lnr-funnel');
$('#open-search-i').removeClass('lnr-cross').addClass('lnr-magnifier');
$('.open-menu-span').toggle();
$('.open-filter-span').show();
$('.open-products-span').show();
$('.open-search-span').show();
});
$("#open-mobile-products-div").click(function (e) {
e.preventDefault();
$('.mobile-menu-div').removeClass('show');
$('.mobile-products-div').toggleClass('show');
$('.mobile-filter-div').removeClass('show');
$('.mobile-search-div').removeClass('show');
$('#open-products-i').toggleClass('lnr-layers lnr-cross');
$('#open-menu-i').removeClass('lnr-cross').addClass('lnr-menu');
$('#open-filter-i').removeClass('lnr-cross').addClass('lnr-funnel');
$('#open-search-i').removeClass('lnr-cross').addClass('lnr-magnifier');
$('.open-products-span').toggle();
$('.open-menu-span').show();
$('.open-filter-span').show();
$('.open-search-span').show();
});
$("#open-mobile-filter-div").click(function (e) {
e.preventDefault();
$('.mobile-menu-div').removeClass('show');
$('.mobile-products-div').removeClass('show');
$('.mobile-filter-div').toggleClass('show');
$('.mobile-search-div').removeClass('show');
$('#open-filter-i').toggleClass('lnr-funnel lnr-cross');
$('#open-menu-i').removeClass('lnr-cross').addClass('lnr-menu');
$('#open-products-i').removeClass('lnr-cross').addClass('lnr-layers');
$('#open-search-i').removeClass('lnr-cross').addClass('lnr-magnifier');
$('.open-filter-span').toggle();
$('.open-menu-span').show();
$('.open-products-span').show();
$('.open-search-span').show();
});
$("#open-mobile-search-div").click(function (e) {
e.preventDefault();
$('.mobile-menu-div').removeClass('show');
$('.mobile-products-div').removeClass('show');
$('.mobile-filter-div').removeClass('show');
$('.mobile-search-div').toggleClass('show');
$('#open-search-i').toggleClass('lnr-magnifier lnr-cross');
$('#open-menu-i').removeClass('lnr-cross').addClass('lnr-menu');
$('#open-products-i').removeClass('lnr-cross').addClass('lnr-layers');
$('#open-filter-i').removeClass('lnr-cross').addClass('lnr-magnifier');
$('.open-filter-span').show();
$('.open-menu-span').show();
$('.open-products-span').show();
$('.open-search-span').toggle();
});
// <!-- mobile navigation system -->
با تشکر
پاسخ با نقل قول
