$(document).ready(function () {
checkWidth();
});
$(window).on("resize", function () {
checkWidth();
});
function checkWidth() {
$vWidth = $(window).width();
// $('#test').html($vWidth);
//Check condition for screen width
if ($vWidth < 767) {
alert();
$(".f-click").on("click", function (event) {
event.stopPropagation();
$(".f-click").siblings(".f-pages").slideUp();
if ($(this).siblings(".f-pages").css('display') == 'none') {
$(this).siblings(".f-pages").slideDown();
} else {
$(this).siblings(".f-pages").slideUp();
return false;
}
});
} else {
// $(".f-click").siblings(".f-pages").slideDown();
// $(".f-click").siblings(".f-pages").css("pointer-events", "none");
alert("else");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-2 col-md-2 mt-4 mt-md-0">
<p class="font-weight-bold f-click">WellAway</p>
<ul class="f-pages">
<li><a href="#">WellAway </a></li>
<li><a href="#">About </a></li>
<li><a href="#">Blog</a></li>
<li><a href="#"> Providers</a></li>
<li><a href="#"> Testimonials</a></li>
<li><a href="#">Contact </a></li>
</ul>
</div>
<div class="col-lg-2 col-md-2">
<p class="font-weight-bold f-click">Extended Plans</p>
<ul class="f-pages">
<li><a href="#">Kidnap/Ransom </a></li>
<li><a href="#">Personal Disability</a></li>
<li><a href="#">Personnel Protection</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-2">
<p class="font-weight-bold f-click">Members & Brokers</p>
<ul class="f-pages">
<li><a href="#">Member Login </a></li>
<li><a href="#">Broker Login </a></li>
<li><a href="#">Provider Search</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-2">
<p class="font-weight-bold f-click">Our Plans</p>
<ul class="f-pages">
<li><a href="#">Individuals & Families </a></li>
<li><a href="#">Global Work & study</a></li>
<li><a href="#">Group & Business</a></li>
</ul>
</div>
Я хочу сделать аккордеон, когда размер экрана меньше 767. Я написал код, он прекрасно работает при обновлении экрана, но после изменения размера экрана окна. это не работает должным образом. пожалуйста, помогите мне. Благодарность
это HTML-код кода, по которому я хочу щелкнуть элемент p (f-click), чтобы открыть содержимое ul (f-pages). когда размер экрана меньше 767.
<div class="col-lg-2 col-md-2 mt-4 mt-md-0">
<p class="font-weight-bold f-click">WellAway</p>
<ul class="f-pages">
<li><a href="#">WellAway </a></li>
<li><a href="#">About </a></li>
<li><a href="#">Blog</a></li>
<li><a href="#"> Providers</a></li>
<li><a href="#"> Testimonials</a></li>
<li><a href="#">Contact </a></li>
</ul>
</div>
<div class="col-lg-2 col-md-2">
<p class="font-weight-bold f-click">Extended Plans</p>
<ul class="f-pages">
<li><a href="#">Kidnap/Ransom </a></li>
<li><a href="#">Personal Disability</a></li>
<li><a href="#">Personnel Protection</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-2">
<p class="font-weight-bold f-click">Members & Brokers</p>
<ul class="f-pages">
<li><a href="#">Member Login </a></li>
<li><a href="#">Broker Login </a></li>
<li><a href="#">Provider Search</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-2">
<p class="font-weight-bold f-click">Our Plans</p>
<ul class="f-pages">
<li><a href="#">Individuals & Families </a></li>
<li><a href="#">Global Work & study</a></li>
<li><a href="#">Group & Business</a></li>
</ul>
</div>
это JQuery кода. ` ` `
$(document).ready(function () {
checkWidth();
});
$(window).on("resize", function () {
checkWidth();
});
function checkWidth() {
$vWidth = $(window).width();
//Check condition for screen width
if ($vWidth < 767) {
alert();
$(".f-click").on("click", function () {
$(".f-click").siblings(".f-pages").slideUp();
if ($(this).siblings(".f-pages").css('display') == 'none') {
$(this).siblings(".f-pages").slideDown();
} else {
$(this).siblings(".f-pages").slideUp();
}
});
} else {
$(".f-click").siblings(".f-pages").slideDown();
$(".f-click").siblings(".f-pages").css("pointer-events", "none");
}
}
```
Новые вопросы
jquery
jQuery - это библиотека JavaScript, рассмотрите возможность добавления тега JavaScript. jQuery - это популярная кросс-браузерная библиотека JavaScript, которая облегчает прохождение Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться в рассматриваемом коде, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.