Нажав на jQuery

Я написал еще один клик, но это не сработало

Могу поспорить, что оба обработчика кликов работали нормально, они просто сводят на нет общий результат, потому что оба запускаются при каждом клике.

Вам нужен только один обработчик кликов, ему просто нужно условно выполнить одну операцию вместо другой. Один из способов поддерживать это условие — сохранить в некотором глобальном состоянии информацию о том, какая операция была выполнена последней. Например:

var isClicked = false;
$("#green").click(function() {

  var audio = new Audio('sounds/green.mp3');
  audio.play();

  if (isClicked) {
    $("#green").css("background-color", "green");
    $("#green").css("border", "0px");
  } else {
    $("#green").css("background-color", "gray");
    $("#green").css("border", "20px solid white");
  }

  isClicked = !isClicked;
});

Каждый щелчок выполняет три действия:

1. Воспроизвести аудио
2. Условно изменить CSS так или иначе
3. Переключите isClicked, чтобы при следующем нажатии было выбрано другое условие.

Однако мы могли бы пойти еще дальше. Поскольку вы переключаете стили CSS, используйте CSS (вместо JavaScript) для определения этих стилей. Например, предположим, что у вас есть следующие стили:

#green {
  background-color: green;
  border: 0px;
}

#green.active {
  background-color: gray;
  border: 20px solid white;
}

Тогда все, что вам нужно будет переключить, — это класс active элемента. И что достаточно удобно, в jQuery есть метод, позволяющий сделать это без необходимости отслеживать состояние переменной. Итак, ваш код JavaScript просто:

$("#green").click(function() {
  var audio = new Audio('sounds/green.mp3');
  audio.play();
  $("#green").toggleClass("active");
});

Просто настройте два разных стиля как классы и одно событие щелчка, которое будет переключаться между ними. Вам просто нужно быть осторожным, чтобы вторичный стиль был написан с более конкретным селектором, чем селектор по умолчанию, чтобы он переопределялся при применении.

$("#green").click(function() {
   //Toggle will work if the classes are set up correctly.
   this.classList.toggle("clicked");
});

/* Set up a default style  */
#green {
  background-color:gray;
  border:20px solid blue;
}

/* Define secondary style to be toggled on/off */
/* This selector needs to be more specific than the default (ID) selector,
   so it will be a Class.ID selector.  */
#green.clicked {
  background-color:green;
  border: 0;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id = "green">This is the content area</div>