ul 中的多个 li 的儿童访问答案

【问题标题】：Children access for a multiple li in ulul 中的多个 li 的儿童访问
【发布时间】：2016-11-18 12:43:41
【问题描述】：

我想在 ul.navigator 中更改 ul 的类，试图仅在我单击的 li 上更改它。但这不会改变任何东西，不起作用。有什么帮助吗？

$('.navigator').children('li ul').each(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>

【问题讨论】：

您没有在代码中的任何位置绑定点击事件
你已经把某样东西装扮成一个 sn-p，实际上它不是一个 sn-p。添加必要的库和代码以使其可运行（或仅使用代码块）。

标签： javascript jquery html css children

【解决方案1】：

您需要使用.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>

【讨论】：

【解决方案2】：

试试这样：

$('.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');
    }
  });
});

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

【讨论】：

【解决方案3】：

使用 toggle 函数

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

现场演示 Here

sn-p

$('.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>

【讨论】：

【解决方案4】：

更好与toggleClass

一起使用

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

或

为您的方式 解决如下问题：

使用子应用与同一行$('.navigator li ul').
在addClass之前申请removeclass。
别忘了添加 jquery 库

片段

$('.navigator li ul').click(function(){
        if($(this).hasClass('opened')){
            $(this).removeClass('opened');
            $(this).addClass('closed');
          
        } 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>

【讨论】：