Я работаю над созданием мегаменю с адаптивными категориями. Сайт использует Laravel, PHP и загрузочный фреймворк. Я не писал оригинальный код, но, поскольку я сделал меню адаптивным, у меня возникла проблема.
Когда я нажимаю на гамбургер, открывается меню. Когда я нажимаю на любую внутреннюю ссылку или где-нибудь на весь экран, меню закрывается. Я попытался «остановить распространение на многочисленных элементах, но безуспешно. Поскольку это пользовательская сборка, в которой категории также используются при внутреннем поиске, я не уверен, как это исправить. Я удалил все меню и поместил в статическое». и все, казалось, работало хорошо.
<div class="navbar-buttons">
<div class="login">
<a href="{{ route('vendor-sign-up') }}" style="margin: 5px">Vendor</a>
<a href="#" onclick="session_check('register-modal')" style="margin: 5px">Sign Up</a>
<a href="#" onclick="session_check('login-modal')" class="login-link" style="margin: 5px">Log In</a>
</div>
</div>
@else
<div class="navbar-dropdown">
<div class="dropdown">
<button class="btn account-options dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" style="color: #240462 !important">
<img
src="{{ Auth::user()->provider ? asset('images/avatar/' . Auth::user()->avatar) : asset('storage/' . Auth::user()->avatar) }}"
alt="" style="width: 24px; height: 24px">
{{ Auth::user()->first_name }}
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
@if (Auth::user()->role->name == 'owner' || Auth::user()->role->name == 'author')
<a class="dropdown-item" href="{{ route('vendor-dashboard') }}"><i class="fas fa-briefcase"></i> My
Business</a>
@elseif (Auth::user()->role->name == 'superadmin' || Auth::user()->role->name == 'admin')
<a class="dropdown-item" href="{{ route('admin-dashboard') }}"><i class="fas fa-cog"></i> Admin
Dashboard</a>
@endif
<a class="dropdown-item" href="#"><i class="fas fa-user"></i> My Profile</a>
<a class="dropdown-item" href="#"><i class="fas fa-star"></i> My Reviews</a>
<a class="dropdown-item" href="{{ route('search-favorites') }}?mapView=1"><i class="fas fa-heart"></i> My
Favorites</a>
<a class="dropdown-item logout" href="#"><i class="fas fa-sign-out"></i> Logout</a>
<form name="logoutForm" action="/logout" method="POST">{{ csrf_field() }}</form>
</div>
</div>
</div>
@endif
</div>
</nav>
<a href="" class="ic menu category-dropdown-menu ">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</a>
<a href="" class="ic close d-none"></a>
<div class="category-nav container-fluid">
<div class="container position-relative">
@foreach (\App\PrimaryCategory::orderBy('name')->get() as $primary)
<div class="category-dropdown" data-id="{{ $primary->id }}">
<div class="category-dropdown-title">{{ $primary->name }}</div>
</div>
<div class="category-dropdown-menu" data-id="{{ $primary->id }}">
<div class="row">
<?php $last = 0; $cols = 1; ?>
<div class="col-3">
@foreach ($primary->secondary_categories->sortBy('name')->sortBy('menu_sequence') as $secondary)
<?php
if ($secondary->menu_display_tertiaries)
$cur = 3 + count($secondary->tertiary_categories);
else
$cur = 3;
?>
@if ($last + $cur > 26)
<?php $last = 0; $cols++ ?>
</div>
<div class="col-3">
@endif
<div class="category-secondary">
<div class="category-secondary-title">
<a href="/listings?pc={{ $primary->id }}&sc={{ $secondary->id }}">{{ $secondary->name }}
»</a>
@if ($secondary->menu_display_tertiaries)
<hr>
@endif
</div>
@if ($secondary->menu_display_tertiaries)
<div class="category-secondary-menu">
@foreach ($secondary->tertiary_categories->sortBy('name')->sortBy('menu_sequence') as
$tertiary)
@if ($tertiary->menu_display)
<a
href="/listings?pc={{ $primary->id }}&sc={{ $secondary->id }}&tc={{ $tertiary->id }}">{{ $tertiary->name }}</a><br>
@endif
@endforeach
</div>
@endif
</div>
<?php $last += $cur ?>
@endforeach
</div>
@for ($i = 0; $i < (3 - $cols); $i++) <div class="col-3">
</div>
@endfor
<div class="dropdown-image">
<img src="{{ asset('/images/category/category2.png') }}" alt="">
</div>
</div>
</div>
@endforeach
@if (!Auth::guest())
@if (!isset($favorites))
<div class="search-favorites">
<a href="{{ route('search-favorites') }}?mapView=1" title="Favorites"><i class="fas fa-heart"></i></a>
</div>
@else
<div class="undo-favorites">
<a href="{{ route('listings') }}" title="Return to Search"><i class="fas fa-minus-circle"></i></a>
</div>
@endif
@else
<div class="search-favorites favorites-guest" data-toggle="modal" data-target="#favorites-modal">
<a href="#" title="Favorites"><i class="fas fa-heart"></i></a>
</div>
@endif
</div>
</div>
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.js') }}"></script>
<script>
$('input[name="q"]').focus(function () {
$(this).parent().find('.input-group-prepend').addClass('d-none');
$(this).css('border-left', '1px solid #ced4da');
$(this).css('border-top-left-radius', '.25rem');
$(this).css('border-bottom-left-radius', '.25rem');
$(this).css('padding-left', '10px');
});
$('input[name="q"]').focusout(function () {
if ($(this).val() == '') {
$(this).parent().find('.input-group-prepend').removeClass('d-none');
$(this).css('border-left', 'none');
$(this).css('border-top-left-radius', '0');
$(this).css('border-bottom-left-radius', '0');
$(this).css('padding-left', '0');
}
});
@if(isset($_GET['login-modal']))
$('#login-modal').modal({
backdrop: 'static',
});
@elseif(isset($_GET['register-modal']))
$('#register-modal').modal({
backdrop: 'static',
});
@endif
function session_check(modal) {
var url = "{{ route('session-check') }}";
var options = {
_token: "{{ csrf_token() }}",
};
$.post(url, options).done(function (data) {
if (data.substr(0, 1) === '{') {
$('#' + modal).modal({
backdrop: 'static',
});
} else {
var current_url = '{!! Request::fullUrl() !!}';
current_url = current_url.replace('?login-modal=1&', '?');
current_url = current_url.replace('?login-modal=1', '');
current_url = current_url.replace('&login-modal=1', '');
current_url = current_url.replace('?register-modal=1&', '?');
current_url = current_url.replace('?register-modal=1', '');
current_url = current_url.replace('®ister-modal=1', '');
window.location = current_url + (current_url.match(/\?/) ? '&' : '?') + modal + '=1';
}
});
}
$('.login-with-email').click(function () {
$('.first-wrap').addClass('d-none');
$('.second-wrap').removeClass('d-none');
$('.login-back').removeClass('d-none');
});
$('.login-back, .login-link').click(function () {
$('.login-back').addClass('d-none');
$('.first-wrap').removeClass('d-none');
$('.second-wrap').addClass('d-none');
});
$('.logout').click(function () {
$('form[name="logoutForm"]').submit();
});
$('.category-dropdown, .category-dropdown-menu').mouseover(function () {
var id = $(this).data('id');
$('.category-dropdown-menu').each(function () {
if ($(this).data('id') == id)
$(this).removeClass('d-none');
});
$('.category-dropdown').each(function () {
if ($(this).data('id') == id) {
$(this).css('background', '#f0f0f0');
$(this).css('border-left', '1px solid #ccc');
$(this).css('border-right', '1px solid #ccc');
$(this).css('border-bottom', 'none');
$(this).css('padding-bottom', '1px');
}
});
});
$('.category-dropdown-menu').mouseleave(function () {
var id = $(this).data('id');
$('.category-dropdown-menu').each(function () {
if ($(this).data('id') == id)
$(this).addClass('d-none');
});
$('.category-dropdown').each(function () {
if ($(this).data('id') == id) {
$(this).css('background', 'none');
$(this).css('border-left', 'none');
$(this).css('border-right', 'none');
$(this).css('border-bottom', '1px solid #ccc');
$(this).css('padding-bottom', '0');
}
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js">
</script>
<script>
$(function () {
$('form[name="loginform"]').validate({
rules: {
email: {
required: true,
maxlength: 255,
email: true,
},
password: {
required: true,
},
},
messages: {
email: {
required: '* You must enter your email address to sign in.',
maxlength: '* This email address is too long [max 255 characters]',
email: '* This is not a valid email address.',
},
password: {
required: '* You must enter your password to sign in.',
},
},
submitHandler: function (form) {
form.submit();
}
});
$('form[name="registerform"]').validate({
rules: {
first_name: {
required: true,
maxlength: 255,
},
last_name: {
required: true,
maxlength: 255,
},
email: {
required: true,
maxlength: 255,
email: true,
remote: {
url: "{{ route('verify-unique-email-no-invites') }}",
type: 'post',
data: {
_token: '{{ csrf_token() }}',
email: function () {
return $('#sign-up-email').val();
}
},
},
},
password: {
required: true,
minlength: 6,
},
password_confirmation: {
required: true,
minlength: 6,
equalTo: '#sign-up-password',
},
},
messages: {
first_name: {
required: '* You must enter your first name to sign up.',
maxlength: '* This email address is too long [max 255 characters]',
},
last_name: {
required: '* You must enter your last name to sign up.',
maxlength: '* This email address is too long [max 255 characters]',
},
email: {
required: '* You must enter your email address to sign up.',
maxlength: '* This email address is too long [max 255 characters]',
email: '* This is not a valid email address.',
remote: '* This email is already in use.',
},
password: {
required: '* You must enter a password to sign up.',
minlength: '* Your password must be 6 characters or longer.',
},
password_confirmation: {
required: '* You must confirm your password to sign up.',
minlength: '* Your password must be 6 characters or longer.',
equalTo: '* Your passwords do not match.',
},
},
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
},
submitHandler: function (form) {
form.submit();
}
});
$('form[name="loginform"] input').change(function () {
$('form[name="loginform"]').valid();
});
$('form[name="registerform"] input').change(function () {
$('form[name="registerform"]').valid();
});
});
</script>
@yield('scripts')