在点击时显示/隐藏div，并点击当前项目的更改类别

Question

我正在尝试使用click显示/隐藏子菜单项，有时它可以工作，但有时会一起打开/关闭，特别是在移动设备（iOS设备）中打开它

唯一的条件是在特定窗口大小下触发点击事件

这里是代码，不确定这里出了什么问题，它只是在做slidetoggle和toggleClass来显示/隐藏不同的图标，我想一次打开每个菜单

$(".title").click(function(e) {
  var ww = $(window).width();
  if (ww < 992) {
    e.preventDefault();
    var linkItems = $(this);
    linkItems.toggleClass('title-mob-minus');
    linkItems.siblings().slideToggle();
  }
});

.title {
  float: left;
  width: 100%;
  color: #000000;
  font-weight: bold;
  font-size: 16px;
}
.title-mob-minus {
  position:relative;
}
.title-mob-minus:after {
  content:"-";
  position:absolute;
  right:50%;
  color:#f00;
  font-size:20px;
  font-weight:bold;
 }
.link-list__items {
  float: left;
  width: 100%;
  font-size: 14px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title" role="heading">
  <a href="javascript:;" role="link">Menu 1</a>
</div>
<div class="link-list__items">
  <ul role="menu">
    <li role="menuitem"><a href="test.html"><span>Submenu Item 1</span></a></li>
    <li role="menuitem"><a href="test.html"><span>Submenu Item 1</span></a></li>
    <li role="menuitem"><a href="test.html"><span>Submenu Item 1</span></a></li>
    <li role="menuitem"><a href="test.html"><span>Submenu Item 1</span></a></li>
  </ul>
</div>
<div class="title" role="heading">
  <a href="javascript:;" role="link">Menu 2</a>
</div>
<div class="link-list__items">
  <ul role="menu">
    <li role="menuitem"><a href="test.html"><span>Submenu Item 1</span></a></li>
    <li role="menuitem"><a href="test.html"><span>Submenu Item 1</span></a></li>
    <li role="menuitem"><a href="test.html"><span>Submenu Item 1</span></a></li>
    <li role="menuitem"><a href="test.html"><span>Submenu Item 1</span></a></li>
  </ul>
</div>