JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<ul id="leftmenu">
  <li class="ui-state-disabled">
    <div>Toys (n/a)</div>
  </li>
  <li id="books">
    <div>Books</div>
  </li>
  <li id="clothes">
    <div>Clothing</div>
  </li>
  <li id="electric">
    <div>Electronics</div>
    <ul>
      <li class="ui-state-disabled">
        <div>Home Entertainment</div>
      </li>
      <li id="auto">
        <div>Car Hifi</div>
      </li>
      <li id="utils">
        <div>Utilities</div>
      </li>
    </ul>
  </li>
  <li id="movies">
    <div>Movies</div>
  </li>
  <li id="music">
    <div>Music</div>
    <ul>
      <li>
        <div>Rock</div>
        <ul>
          <li>
            <div>Alternative</div>
          </li>
          <li>
            <div>Classic</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Jazz</div>
        <ul>
          <li>
            <div>Freejazz</div>
          </li>
          <li>
            <div>Big Band</div>
          </li>
          <li>
            <div>Modern</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Pop</div>
      </li>
    </ul>
  </li>
  <li class="ui-state-disabled">
    <div>Specials (n/a)</div>
  </li>
</ul>

JavaScript

$(function() {
  $('#leftmenu').menu({
    select: function(e, ui) {
      var selectId = ui.item.attr("id");
      $.ajax({
        type: "POST",
        cache: false,
        url: "/Session/Index/",
        success: function(result) {
          if (result.length > 0) {
            performListItemAction(selectId);
          } else {
            window.location.href = '/Home/Index/'
          }
        }
      });
      console.log(e.type + " event, ID: " + selectId);
    }
  });
});