JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navi">
  <ul>
    <li class="menu-item-has-children"><a>テスト</a>
      <ul class="sub-menu">
        <li>テスト</li>
      </ul>
    </li>
      <li><a href="https://wp-simplicity.com/">hrefがある場合は変わらないかチェック</a>
        <ul>
          <li><a>ネストした中身も変わるかチェック</a></li>
        </ul>
      </li>
  </ul>
</div>

CSS

#navi .menu-item-has-children p {
  color: #fff;
  display: inline-block;
  margin: 0;
  padding: .5em 1.8em;
  box-sizing: border-box;
}

#navi .menu-item-has-children p:hover {
  background-color: #333;
}

JavaScript

(function($) {
  $(function() {

    var checkA = $("#navi li").find("a");

    //checkAの各aを調べて
    checkA.each(function() {
      var checkAhref = $(this).attr("href"),
        text = $(this).text();

      //aタグがhrefをもっていない場合
      if (checkAhref === undefined) {
        $(this).html("<p>" + text + "</p>"); //ここでクラス変更
        $("p", this).unwrap("a");
      }

    });

    var pattern = /iPhone|iPad/i;
    var UA = navigator.userAgent;

    if (pattern.test(UA)) {
      $("#navi ul > .menu-item-has-children").on("tachstart", function() {
        if ($(this).children(".sub-menu").css("display") !== "block") {
          $(this).children(".sub-menu").css("display", "block");
        } else {
          $(this).children(".sub-menu").css("display", "none");
        }
      });
    }

  });
})(jQuery);