ToggleClass не работает с display:block
У меня есть 4 элемента div со свойством style="display: none", и когда я пытаюсь изменить свойство на display: block через toggleClass, это не работает. JS:
$(document).ready(function () {
$("#add_client").click(function () {
$("#inputs").toggleClass("shown");
});
$("#show_clients").click(function () {
$("#show_information").toggleClass("shown");
});
$("#show_free_rooms").click(function () {
$("#show-free-rooms").toggleClass("shown");
});
$("#search-by").click(function () {
$("#find_room_by_name").toggleClass("shown");
});
});
CSS:
.shown{
display: block;
}
Может ли кто-нибудь объяснить мне, что не так с моим кодом?
«изменить свойство через toggleClass» — toggleClass изменяет свойство class, а не свойство style.
Исправление состоит в том, чтобы по умолчанию скрыть их в css, в базовом формате это будет означать удаление вашего style= в HTML, а затем добавление div { display:hidden } - очевидно, это повлияет на все элементы div, поэтому вы можете захотеть дать переключаемым элементам определенного класса и применить к нему.
Если вы действительно хотите сделать это таким образом, вы можете добавить !important в CSS. Тогда он переопределит встроенный стиль.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проблема с вашим образцом заключается в том, что объявление отображения в CSS не перезаписывает атрибут, установленный с помощью встроенного стиля, поскольку последний имеет более высокий приоритет. Вы также можете определить состояние display: none в CSS с таким же уровнем специфичности.
См. ниже работающий пример, обратите внимание, что я намеренно сделал второй элемент неудачным, объявив стиль атрибута в свойстве HTML, как вы сделали изначально, чтобы можно было заметить разницу с остальными элементами:
$(document).ready(function () {
$("#add_client").click(function () {
$("#inputs").toggleClass("shown");
});
$("#show_clients").click(function () {
$("#show_information").toggleClass("shown");
});
$("#show_free_rooms").click(function () {
$("#show-free-rooms").toggleClass("shown");
});
$("#search-by").click(function () {
$("#find_room_by_name").toggleClass("shown");
});
});.myitems div {
display: none;
}
.myitems div.shown {
display: block;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id = "add_client">add client</button> |
<button id = "show_clients">show client (not working)</button> |
<button id = "show_free_rooms">show_free_rooms</button> |
<button id = "search-by">search-by</button>
<div class = "myitems">
<div id = "inputs">
inputs div content
</div>
<div id = "show_information" style = "display: none">
show_information div content (not working)
</div>
<div id = "show-free-rooms">
show-free-rooms div content
</div>
<div id = "find_room_by_name">
find_room_by_name div content
</div>
</div>Встроенные стили, добавленные к элементу (например, style="font-weight: bold;"), всегда перезаписывают любые обычные стили в таблицах стилей автора, и поэтому их можно рассматривать как имеющие наивысшую специфичность.
Возможным решением вашей проблемы было бы удаление встроенного стиля и вместо этого класса, скажем, hidden для этих элементов. И в вашей таблице стилей
.hidden {
display: none;
}
.shown{
display: block;
}
Всегда? № jsfiddle.net/rvq1329k
Специфика developer.mozilla.org/en-US/docs/Web/CSS/Specificity не используйте встроенный стиль....