Javascript и JQuery скрипт только один раз меняет класс

Question

Я создаю веб-страницу для школьной домашней работы и делаю выпадающий список для навигации, чтобы показать его, я использую javascript и jquery, но он работает только один раз, я могу открыть раскрывающийся список, но не могу его закрыть.

Я пробовал несколько способов сделать это, например, используя только javascript или класс переключения, но это не сработало

<nav id="logged">
  <a href="#" id="yname" name="yname"> Your Name <i class="fa fa-caret- 
  down"></i></a>
  <ul id="dropdowncontent" class="dropdown-content">
   <li href="#">Action</li>
   <li href="#">Another action</li>
   <li href="#" class="logout">Logout</li>
  </ul>
</nav>

var x = 0;
if (x == 0){
$("#yname").click(function(){
$("#dropdowncontent").removeClass("dropdown-content");
$("#dropdowncontent").addClass("dropdown-content-show");
var x = 1;
});
}

else {
$("#yname").click(function(){
$("#dropdowncontent").removeClass("dropdown-content-show");
$("#dropdowncontent").addClass("dropdown-content");
var x = 0;
});
}

.dropdown-content-show {
    display: block;
}

.dropdown-content {
    display: none;
}

Я ожидал показать раскрывающийся списоки скрыть раскрывающийся список, но он показывает только

Answer 1

Прежде всего, не используйте X в качестве условного выражения. Вместо использования X и изменения его значения, если пользователь нажал кнопку, вы должны использовать метод classList.contains(). Вы также должны обрабатывать условие после события.

По сути, код должен обрабатываться следующим образом:

$("#yname").click(function(){
    if($("#dropdowncontent").classList.contains("dropdown-content")){
        $("#dropdowncontent").classList.remove("dropdown-content")
        $("#dropdowncontent").classList.add("dropdown-content-show")
    } else {
        $("#dropdowncontent").classList.add("dropdown-content")
        $("#dropdowncontent").classList.remove("dropdown-content-show")
    }
}

Это достойное улучшение по сравнению с вашим кодом, но все же очень глупое. Если вы хотите продвинуться в JavaScript, просто изучите язык. Нет таких ярлыков, как jQUery, просто изучите JS и переходите к чему-то вроде React JS

Answer 2

Замените

<a href="#" id="yname" name="yname"> Your Name <i class="fa fa-caret- 
  down"></i></a>

на:

<a href="#" id="yname" name="yname" onclick="toggleFunction()"> Your Name <i class="fa fa-caret- 
    down"></i></a>

и внутри js-скрипта добавьте:

function toggleFunction() {
var element = document.getElementById("dropdowncontent");
element.classList.toggle("dropdown-content");}

Демо: https://codepen.io/endritspahiu/pen/oNNyaMQ

Answer 3

Вы назначаете только первый обработчик кликов. Рассмотрим логику этих двух строк кода:

var x = 0;
if (x == 0){

Переменная x будет всегда равна 0 в этом состоянии. Потому что он был явно установлен на 0 непосредственно перед проверкой.

Поместите условную логику в обработчик щелчка вместо условного создания обработчика. Примерно так:

var x = 0;

$("#yname").click(function(){
    if (x == 0) {
        $("#dropdowncontent").removeClass("dropdown-content");
        $("#dropdowncontent").addClass("dropdown-content-show");
        x = 1;
    } else {
        $("#dropdowncontent").removeClass("dropdown-content-show");
        $("#dropdowncontent").addClass("dropdown-content");
        x = 0;
    }
});

(Обратите внимание также на удаление var при переназначении переменной. Это создавало новую переменную в этой области, а это не то, что вам нужно.)

Хотя логически вы должны упростить это до чего-то вроде:

$("#yname").click(function(){
    $("#dropdowncontent").toggleClass("dropdown-content");
    $("#dropdowncontent").toggleClass("dropdown-content-show");
});