儿童可以访问ul

Question

我想更改 ul.navigator 中的ul类，尝试仅在我点击的li上更改它。但这并没有改变任何东西，也没有用。一些帮助？

＆＃13;

＆＃13;

$('.navigator').children('li ul').each(function() {
  if ($(this).hasClass('opened')) {
    $(this).addClass('closed');
    $(this).removeClass('opened');
  } else {
    $(this).addClass('opened');
    $(this).removeClass('closed');
  }
});

＆＃13;

.opened {
  color: green
}
.closed {
  color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
  <li class="elem1">
    <span>Element 1</span>
    <ul class="opened">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li class="elem2">
    <span>Element 2 </span>
  </li>
  <li class="elem3">
    <span>Element 3 </span>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

更好与 toggleClass

一起使用

   $('.navigator li ul').click(function(){
         $(this).toggleClass('closed');          
    });

或

以您的方式 解决以下问题：

1. 使用childern申请同一行$('.navigator li ul').
2. 在removeclass之前应用addClass。
3. 不要忘记添加jquery库

<强>段


＆＃13;
＆＃13;
$('.navigator li ul').click(function(){
        if($(this).hasClass('opened')){
            $(this).removeClass('opened');
            $(this).addClass('closed');
          
        } else {
            $(this).addClass('opened');
            $(this).removeClass('closed');
        }
    });
＆＃13;
.opened{color:green}
.closed{color:red}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
  <li class="elem1">
    <span>Element 1</span>
    <ul class="opened">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li class="elem2">
    <span>Element 2 </span>
  </li>
  <li class="elem3">
    <span>Element 3 </span>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您需要使用.find()代替.children()

  

.find()和.children()方法类似，只是后者只在DOM树中向下移动一个级别。

$('.navigator').find('li ul')

或，Descendant selector

$('.navigator li ul')

$('.navigator').find('li ul').click(function() {
  if ($(this).hasClass('opened')) {
    $(this).addClass('closed');
    $(this).removeClass('opened');
  } else {
    $(this).addClass('opened');
    $(this).removeClass('closed');
  }
});

.opened {
  color: green
}
.closed {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
  <li class="elem1">
    <span>Element 1</span>
    <ul class="opened">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li class="elem2">
    <span>Element 2 </span>
  </li>
  <li class="elem3">
    <span>Element 3 </span>
  </li>
</ul>

Answer 3

试试这样：

$('.navigator > li').on('click', function() {
  $('.navigator').children('li ul').each(function() {
    if ($(this).hasClass('opened')) {
      $(this).addClass('closed');
      $(this).removeClass('opened');
    } else {
      $(this).addClass('opened');
      $(this).removeClass('closed');
    }
  });
});

这样，当点击li正下方的.navigator时，您的代码就会触发。

Answer 4

使用 toggle 功能

$('.navigator li').click(function(){
             $(this).children('ul').toggleClass('closed');          
        });

现场演示 Here

摘录

$('.navigator li').click(function(){
             $(this).children('ul').toggleClass('closed');          
        });

.closed
{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <ul class="navigator">
      <li class="elem1">
        <span>Element 1</span>
        <ul class="opened">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </li>
      <li class="elem2">
        <span>Element 2 </span>
      </li>
      <li class="elem3">
        <span>Element 3 </span>
      </li>
    </ul>