Как активировать элемент вне холста Elementor с помощью пользовательской анимированной кнопки (html/CSS/JS)?Javascript

Форум по Javascript
Ответить
Anonymous
 Как активировать элемент вне холста Elementor с помощью пользовательской анимированной кнопки (html/CSS/JS)?

Сообщение Anonymous »

Я изучаю веб-программирование и недавно столкнулся с проблемой.
Я использую WordPress v6.8.3 и Elementor Pro 3.32.2.
Я хотел бы использовать созданную вручную кнопку анимированного меню-гамбургера для запуска другого элемента, Off-canvas, созданного с помощью Появился собственный внешний виджет Elementor.
Сама по себе анимированная кнопка не представляла проблемы. Присвоим этому элементу кнопки идентификатор «nav-icon1». Вот код HTML-виджета:

Код: Выделить всё





Animated Navigation Icon



* {
margin: 0;
padding: 0;
}

/* Icon 1 */
#nav-icon1 {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
}

#nav-icon1 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #d3531a;
border-radius: 9px;
opacity: 1;
left: 0;
transition: .25s ease-in-out;
}

/* Adjust the position of the spans for icon 1 */
#nav-icon1 span:nth-child(1) {
top: 0px;
}

#nav-icon1 span:nth-child(2) {
top: 18px;
}

#nav-icon1 span:nth-child(3) {
top: 36px;
}

#nav-icon1.open span:nth-child(1) {
top: 18px;
transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}

#nav-icon1.open span:nth-child(3) {
top: 18px;
transform: rotate(-135deg);
}











$(document).ready(function(){
// Toggle the 'open' class on nav icon 1 when clicked
$('#nav-icon1').click(function(){
$(this).toggleClass('open');
});
});




Вставив этот код в HTML-виджет Elementor Pro, вы получите кнопку, которая меняет свою форму при щелчке и меняет свою форму при втором щелчке.
Теперь самое сложное.
Я не могу найти никакой информации о том, как активировать элемент off-canvas (Имя вне холста: "offcanvastestelement"), нажав кнопку, созданную вручную (идентификатор кнопки: "nav-icon1").
Я пытался проверить исходный код Elementor Pro, но, к сожалению, у меня пока недостаточно опыта в JS.
Могло бы пожалуйста, помогите мне с этим, если это вообще возможно?

Подробнее здесь: https://stackoverflow.com/questions/797 ... -button-ht
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»