JSFiddle - React, Tailwind, and code Playground

by pratik24

HTML

<ul id="menu">
  <li><a href="#">Aberdeen</a></li>
  <li><a href="#">Ada</a></li>
  <li><a href="#">Adamsville</a></li>
  <li><a href="#">Addyston</a></li>
  <li>
    <a href="#">Delphi</a>
    <ul>
      <li >
          <a href="#">Ada</a>
          <ul>
              <li>
                  <a href="#">ankita</a>              
              </li>
          </ul>    
      <li><a href="#">Saarland</a></li>
      <li><a href="#">Salzburg</a></li>
    </ul>
  </li>
  <li><a href="#">Saarland</a></li>
  <li>
    <a href="#">Salzburg</a>
    <ul>
      <li>
        <a href="#">Delphi</a>
        <ul>
          <li><a href="#">Ada</a></li>
          <li><a href="#">Saarland</a></li>
          <li><a href="#">Salzburg</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Delphi</a>
        <ul>
          <li><a href="#">Ada</a></li>
          <li><a href="#">Saarland</a></li>
          <li><a href="#">Salzburg</a></li>
        </ul>
      </li>
      <li><a href="#">Perch</a></li>
    </ul>
  </li>
  <li><a href="#">Amesville</a></li>
</ul>

CSS

.ui-menu { width: 150px; }

JavaScript

$("#menu").menu(/*{
select: function( event, ui ) {
    var selection = ui.item.text();
    var  get=this.event;
    console.log(get);
}}*/);

$("#menu a").click(function() {
    
    //alert($(this).html()); // gets innerHTML of clicked li
    console.log($(this).text()); // gets text contents of clicked li
});