JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.test {
  pointer-events: auto;
}


/* 768 */

@media (min-width: 48em) {
  .test {
    pointer-events: none;
  }
}


/* 1200 */

@media (min-width: 75em) {
  .test {
    pointer-events: auto;
  }
}


/*--------以下不要--------*/

.test {
  color: green;
}


/* 768 */

@media (min-width: 48em) {
  .test {
    color: blue;
  }
}


/* 1200 */

@media (min-width: 75em) {
  .test {
    color: red;
  }
}

JavaScript

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

    var checkA = $("#navi li").find("a");
		
    //checkAの各aを調べて
    checkA.each(function() {
      var checkAhref = $(this).attr("href");
      
      //aタグがhrefをもっていない場合
      if (checkAhref === undefined) {
        $(this).addClass("test"); //ここでクラス変更
      }
    });

  });
})(jQuery);