jQuery slideToggle - 子元素切换父元素

Question

我正在尝试构建一个简单的幻灯片切换菜单。但是，无论我如何更改代码，我都会遇到同样的问题。单击展开的子菜单也会切换父项。

我可以通过在li中定位锚点来使代码正常工作：

$（'。test'）。find（'li：has（ul）＆gt; a'）。点击

然后使用以下内容进行切换。

$（this）.next（'ul'）。slideToggle（），

但是，我想避免在li元素中将我的文本包装在一个锚元素中。

$(document).ready(function(){
    $('.test').find('li:has(ul)').click(function(){
        $(this).toggleClass('opened');
        $(this).children('ul').slideToggle();
    });
});

.test ul li ul {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="test">
  <ul>
    <li>One
      <ul>
        <li>a
          <ul>
            <li>i</li>
            <li>ii</li>
            <li>iii</li>
          </ul></li>
        <li>b
          <ul>
            <li>i</li>
            <li>ii</li>
            <li>iii</li>
          </ul></li>
        <li>c
          <ul>
            <li>i</li>
            <li>ii</li>
            <li>iii</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Two
      <ul>
        <li>a
          <ul>
            <li>i</li>
            <li>ii</li>
            <li>iii</li>
          </ul></li>
        <li>b
          <ul>
            <li>i</li>
            <li>ii</li>
            <li>iii</li>
          </ul></li>
        <li>c
          <ul>
            <li>i</li>
            <li>ii</li>
            <li>iii</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Three
      <ul>
        <li>a
          <ul>
            <li>i</li>
            <li>ii</li>
            <li>iii</li>
          </ul></li>
        <li>b
          <ul>
            <li>i</li>
            <li>ii</li>
            <li>iii</li>
          </ul></li>
        <li>c
          <ul>
            <li>i</li>
            <li>ii</li>
            <li>iii</li>
          </ul>
        </li>
      </ul>
    </li>