使用next（）的toggleClass（）不起作用Jquery

Question

我有这段代码：

<ul class="mobile">
     <li>
        link 1
        <span>></span>
        <ul class="submenu">
           <li></li>
           <li></li>
        </ul>
     </li>
     <li>
        link 2
        <span>></span>
        <ul class="submenu">
           <li></li>
           <li></li>
        </ul>
     </li>
     <li>
        link 3
        <span>></span>
        <ul class="submenu">
           <li></li>
           <li></li>
        </ul>
     </li>
  </ul>


$('.mobile > li > span').click(function(event) {
    event.preventDefault();
    $(this).next('.submenu').toggleClass('active');
});

我想要做的是在点击span时切换一个名为“有效”的课程，但它不起作用。

感谢您的帮助！

Answer 1

$('.mobile > li > span').click(function(event) {
    $(this).next('ul').toggleClass('main');
});

.main {
    font-size: 120%;
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mobile">
     <li>
        link 1
        <span>>Click Me</span>
        <ul class="submenu">
           <li>hello</li>
           <li>hello</li>
        </ul>
     </li>
     <li>
        link 2
        <span>>click me</span>
        <ul class="submenu">
           <li>hello </li>
           <li>hello</li>
        </ul>
     </li>
     <li>
        link 3
        <span>>Click me</span>
        <ul class="submenu">
           <li>hello </li>
           <li>hello</li>
        </ul>
     </li>
  </ul>

Answer 2

最简单，最喜欢的方法如下。试试这个。

<ul class="mobile">
     <li>
        link 1
        <span data-menu="1st" class="spanclick">></span>
        <ul class="submenu" id="1st">
           <li></li>
           <li></li>
        </ul>
     </li>
     <li>
        link 2
        <span data-menu="2nd" class="spanclick">></span>
        <ul class="submenu" id="2nd">
           <li></li>
           <li></li>
        </ul>
     </li>
     <li>
        link 3
        <span data-menu="3rd" class="spanclick">></span>
        <ul class="submenu" id="3rd">
           <li></li>
           <li></li>
        </ul>
     </li>
  </ul>


$('span.spanclick').click(function(e) {
    e.preventDefault();
    var cl = $(this).attr('data-menu');
    $('ul#'+cl).toggleClass('active');
});