JSFiddle - React, Tailwind, and code Playground

HTML

<div id="food-menu" class="menu menu-close">
  <span class="menu-title">Продуктовое меню</span>
  <ul class="menu-items">
    <li>Сыр</li>
    <li>Колбаса</li>
    <li>Торт</li>
  </ul>
</div>

CSS

.menu-title
{
    cursor: pointer;
}
.menu-close .menu-items
{
    display: none;
}

JavaScript

var foodMenu = new Menu({ 
  elem: $('#food-menu')
});

/**
 * options -- объект с параметрами меню. 
 *   elem -- элемент меню
 */
function Menu(options) {
    var elem = options.elem;
    var _this = this;

    this.open = function () {
        elem.removeClass('menu-close');
    };

    this.close = function () {
        elem.addClass('menu-close');
    };

    elem.on('click', '.menu-title', function () {
        if (elem.hasClass('menu-close')) {
            _this.open();
        } else {
            _this.close();
        }
    });

}