У меня есть проблемы с поворотным изображением при его нажатии.Как повернуть изображение с помощью jquery?
У меня есть пункт меню с подменю, но подменю отображается только при щелчке пункта меню. Теперь я добавил изображение (стрелку) в пункт меню, чтобы показать, что подменю открыто или закрыто, поэтому я хотел бы перевернуть изображение вверх дном, если подменю открыто.
Странно, что следующий код - это точный код, который я использую на своем веб-сайте, но здесь он работает, и на моем сайте весь раскрывающийся список div исчезает, как только я вставил код jQuery в свой файл ...
$("#arrowed").toggle(function() {
$(".dropdown-content").slideDown(200);
$("#dropdown-image").css({
"-webkit-transform": "rotate(180deg)",
"-moz-transform": "rotate(180deg)",
"transform": "rotate(180deg)"
});
}, function() {
$(".dropdown-content").slideUp(200);
$("#dropdown-image").css({
"-webkit-transform": "rotate(0deg)",
"-moz-transform": "rotate(0deg)",
"transform": "rotate(0deg)"
});
});* {
\t margin: 0px;
\t padding: 0px;
\t line-height: 100%;
\t box-sizing: border-box;
\t border: 0px solid black;
\t font-family: georgia;
}
.menu {
\t float: left;
\t height: 70px;
\t color: rgba(0,0,0,1.0);
\t font-size: 20px;
\t padding: 30px;
\t text-decoration: none;
}
.header p:hover {
\t cursor: pointer;
}
.menu:hover, .dropdown:hover .menu {
\t border-bottom: 5px solid rgba(0,0,0,1.0);
\t cursor: pointer;
}
#dropdown-image {
\t width: 70px;
\t height: 70px;
\t padding: 15px;
\t float: right;
\t position: relative;
\t top: -30px;
}
#arrowed {
\t padding-right: 0px;
}
.dropdown {
\t position: relative;
display: inline-block;
float: left;
}
.dropdown-content {
\t display: none;
\t position: absolute;
\t top: 70px;
\t width: 150%;
}
.dropdown-inner:link, .dropdown-inner:visited {
\t display: block;
\t font-size: 18px;
\t padding: 16px 20px;
\t color: rgba(0,0,0,1.0);
\t background-color: rgba(0,100,0,0.8);
\t text-decoration: none;
}
.dropdown-inner:hover, .dropdown-inner:active {
\t display: block;
\t font-size: 18px;
\t padding: 16px 20px;
\t color: rgba(0,0,0,1.0);
\t background-color: rgba(100,100,100,1.0);
\t text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="dropdown">
<a class="menu" id="arrowed" href="">Home
<img src="https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-512.png" id="dropdown-image" />
</a>
<div class="dropdown-content">
<a class="dropdown-inner" href="homepage.php">Homepage</a>
<a class="dropdown-inner" href="item1.php">Item 1</a>
<a class="dropdown-inner" href="item2.php">Item 2</a>
<a class="dropdown-inner" href="item3.php">Item 3</a>
<a class="dropdown-inner" href="item4.php">Item 4</a>
<a class="dropdown-inner" href="item5.php">Item 5</a>
</div>
</div>Так что я не считаю, что проблема заключается в JQuery, но я не могу найти реальную проблему ...
Edit: нет, это не является дубликатом , потому что в моем случае в моем js-файле код ждет, пока страница не будет загружена, я только не копировал эту часть кода, потому что я не думал, что это имеет значение.
Update:
Так я стал ближе к ответу, теперь я использую этот код JQuery:
$(document).ready(function(){
$("#arrowed").click(function(){
$(".dropdown-content").slideToggle(200);
$("#dropdown-image").css({
"-webkit-transform": "rotate(180deg)",
"-moz-transform": "rotate(180deg)",
"transform": "rotate(180deg)"
});
});
});
стрелка поворачивается вверх-вниз, когда я открываю выпадающий список, может кто-нибудь объясняет, как вернуть его обратно, когда я закрываю выпадающий список? Спасибо, уже!
Вы должны обернуть свой код в '$ (функция() {...});' - Jquery не можете прикреплять обработчики событий к объектам, которые не доступны в DOM при запуске кода – mplungjan
Вы не видите запятую (',') после '' -moz-transform ': «rotate (180deg)» ', что вызывает синтаксическую ошибку в вашем коде. –