这不起作用，因为$(".sub-menu")选择了 all 子菜单，并从每个子菜单中删除了visible类。接下来toggleClass再次添加（切换）删除的visible类。
如果只想从其他元素中删除visible，必须向上遍历层次结构，从父元素中获取所有同级元素。现在，visible只从其他子菜单中删除：

$(this).parent().siblings().children(".sub-menu").removeClass('visible');

x一个一个一个一个x一个一个二个一个x一个一个三个一个

如果在removeClass之后使用，则toggleClass始终为添加类

// main menu toggle of sub-menu
  $(".menu-item-has-children > a").click(function(e) {
    // check active
    var isCurrentActive = $(this).next('.sub-menu').hasClass('visible')
    
    // remove .visible from other .sub-menu
    $(".sub-menu").removeClass('visible');

    // if current menu deactive add visible 
    if(!isCurrentActive){
      $(this).next(".sub-menu").addClass('visible');
    }

    // prevent the <a> from default behavior
    e.preventDefault();
  });

.sub-menu{  display:none }
.sub-menu.visible{  display:block }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="menu-item-has-children">
        <a href="#">Services</a>
        <ul class="sub-menu">
            <li><a href="#">Thing 1</a></li>
            <li><a href="#">Thing 2</a></li>
        </ul>
    </li>
    <li class="menu-item-has-children">
        <a href="#">Services</a>
        <ul class="sub-menu visible">
            <li><a href="#">Widget 1</a></li>
            <li><a href="#">Widget 2</a></li>
        </ul>
    </li>
</ul>