Показывать скрытый раздел в WordPress Elementor при нажатии кнопки / текста

Я пытаюсь создать jQuery, который позволит мне отображать / скрывать разделы по классам на веб-сайте, когда я нажимаю выбранную кнопку.

я пытался

создал текст / кнопку с веб-сайтами классов css и раздел с веб-классами css, затем:

$("#websites").click(function(){
    $(".web").hide();
})

Но это не работает для меня, любая помощь будет оценена по достоинству. Спасибо

Новый код

> <button onclick="myfunction()">Hide/Show</button> <script> function
> myfunction() {
>     var x = document.getElementById('myDIV');
>     if (x.style.display === 'none') {
>         x.style.display = 'block';
>     } else {
>         x.style.display = 'none';
>     } } </script>

Мне нужно показать / скрыть несколько значений. Я пробовал getbyclass, а также querySelectorAll. но это все еще не работает для меня. Пожалуйста, порекомендуйте.


javascript wordpress jquery elementor
person Marko Djurdjevic    schedule 13.01.2021    source источник
comment
Вам нужно добавить второй " в ваш начальный селектор кликов - $("#websites").click(function(){ $(".web").hide(); });. Код, который вы показали, недействителен, я не знаю, ваша проблема или это просто опечатка!   -  person Oliver Trampleasure    schedule 13.01.2021
comment
Я пробовал с, но все еще не работает   -  person Marko Djurdjevic    schedule 13.01.2021
comment
Вам необходимо предоставить свой HTML-код, потому что приведенный выше код будет работать. Прочтите это для получения совета: stackoverflow.com/help/minimal-reproducible-example   -  person Oliver Trampleasure    schedule 13.01.2021
comment
Я не уверен, как предоставить HTML, потому что я использую конструктор страниц Wordpress Elementor. Тем временем я нашел другой код, который пытаюсь реализовать. Новый код работает с getElementById, но мне нужно несколько значений, я не могу заставить его работать таким образом. Я пробовал getbyclass, а также querySelectorAll. Я обновлю свой запрос новым кодом.   -  person Marko Djurdjevic    schedule 14.01.2021

Ответы (1)


arrow_upward
0
arrow_downward

Было бы намного проще использовать для этого jquery - вы можете добавить событие click к своей кнопке, а затем выбрать нужные элементы с помощью class с помощью $(".classname"), а затем вызвать .toggle().

Я привел пример ниже, код полностью прокомментирован, все CSS правила предназначены просто для того, чтобы он выглядел лучше, они не нужны для функциональности.

// Add click event to toggle button
$("#toggleButton").click( function() {

  // Toggle elements with the class .toggleBox
  $(".toggleBox").toggle();

});
.box {
  height: 25px;
  width: 25px;
  margin: 5px;
  color: white;
  background: blue;
  text-align: center;
  line-height: 25px;
}

.toggleBox {
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Boxes in green have the class .toggleBox, those in blue do not. The button below has a click event attached to it and will toggle the boxes with the class .toggleBox to show/hide</p>

<button id="toggleButton">Hide/Show</button>

<div class="box toggleBox">
  A
</div>

<div class="box toggleBox">
  B
</div>

<div class="box">
  C
</div>

<div class="box toggleBox">
  D
</div>

<div class="box">
  E
</div>

person Oliver Trampleasure    schedule 14.01.2021
comment
Еще раз спасибо за ваш быстрый ответ, сейчас он работает в редакторе Elementor, но не на действующем сайте. ‹A href=propersoft.rs/t1 title = пример ›пример ‹/a› - person Marko Djurdjevic; 14.01.2021
comment
Вам нужно присвоить всем ссылкам class, как у меня в примере, например, чтобы напрямую взять код из моего примера, ссылка должна быть: <a href="propersoft.rs/t1" class="toggleBox" title="example">example</a>" - person Oliver Trampleasure; 14.01.2021