#jquery #bootstrap-4 #show-hide
#jquery #bootstrap-4 #показать-скрыть
Вопрос:
Я обновляю до Bootstrap 4 и заметил, что все наши jQuery show / hide не работают должным образом при использовании скрытого атрибута. Если я удалю скрытый атрибут после show(), он будет работать правильно. В Bootstrap 3 в этом не было необходимости.
К сожалению, у нас есть около 1400 show / hide, которые мне пришлось бы изменить, чтобы перейти на Bootstrap 4. Кто-нибудь знает, в чем проблема, или простое решение, чтобы исправить это без изменения 1400 строк кода?
$(document).ready(function() {
$("#hide").click(function() {
$("p").hide();
});
$("#show").click(function() {
$("p").show();
//$("p").removeAttr("hidden");
});
}); <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p hidden>If you click on the "Hide" button, this paragraph should disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button> Ответ №1:
Сначала вы должны включить в заголовок тег ссылки на код bootstrap.css, а затем в конце любого тега и перед закрывающим тегом body, который вы должны добавить по порядку Jquery.js popper.js (если используется в вашем коде), а затем bootstrap.js файл
Комментарии:
1. Спасибо вам, Мед Окл!
2. Привет, Мед Окл. Я изменил порядок и добавил jQuery.js и popper.js во-первых, но показать / скрыть все еще не работало должным образом..
Ответ №2:
Это не работает, потому Bootstrap что библиотека загружается первой, а jQuery функциональность не попадает на первую сторону.
Попробуйте изменить последовательность, например jQuery > Boostrap .
$(document).ready(function() {
$("#hide").click(function() {
$("p").hide();
});
$("#show").click(function() {
$("p").show();
//$("p").removeAttr("hidden");
});
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<p hidden>If you click on the "Hide" button, this paragraph should disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button> Комментарии:
1. Спасибо, курсоррукс!
2. Привет, cursorrux. Ваш фрагмент кода выглядит так, как будто он работает, не похоже, что на самом деле используется Bootstrap. Если вы добавите rel=»stylesheet» в тег ссылки, он изменится на кнопки начальной загрузки, но показать / скрыть больше не работает.
Ответ №3:
Все работает нормально, вам нужно включить jquery ранее, а затем bootstrap.js
$(document).ready(function() {
$("#hide").click(function() {
$("#test").removeClass('d-block').addClass('d-none');
});
$("#show").click(function() {
$("#test").removeClass('d-none').addClass('d-block');
});
}); <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<p id="test" class="d-none">If you click on the "Hide" button, this paragraph should disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button> Комментарии:
1. Спасибо, Ваня!
2. Ваня, я заметил, что в твоем коде у тега <p> нет атрибута hidden . Когда вы добавляете скрытый атрибут, он больше не работает. Это проблема, с которой я сталкиваюсь, когда у нас есть сотни элементов, которые скрыты при запуске.
3. Gru1, я обновил свой код, добавив классы начальной загрузки ‘d-none’ и ‘d-block’ для использования видимости элементов, пожалуйста, проверьте сейчас
4. Спасибо, Ваня, твой код работает так, как мне нужно. К сожалению, мне нужно изменить сотни строк кода, чтобы преобразовать скрытый атрибут в класс d-none. Мой код работает, если вы перейдете на Bootstrap 3.4.1, но что-то в Bootstrap 4 нарушает его. Мне нужно выяснить, что это такое, чтобы я мог попытаться переопределить его. Еще раз спасибо.