php - 如何使用javascript隐藏子元素

Question

如果我点击所有子元素下的主要元素，我已经完成了显示主要元素的 javascript 代码，但在我的代码中不起作用。

$(function() {
  //alert("hello");
  $(".chlnode").parent().hide();
  $(".mainnode").click(function() {
    alert("mainnode is clicking");
    $(this).children('ul').show();
    $(this).siblings().find('ul').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<ul>
  <li class='mainnode'>A</li>
  <ul>
    <li class='chlnode'>A1</li>
    <ul>
      <li class='chlnode'>A3</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>A2</li>
    <ul>
      <li class='chlnode'>A4</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>A5</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>B</li>
  <ul>
    <li class='chlnode'>B1</li>
    <li class='chlnode'>B2</li>
    <ul>
      <li class='chlnode'>B3</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>B4</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>C</li>
  <ul>
    <li class='chlnode'>C1</li>
    <ul>
      <li class='chlnode'>C2</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>C3</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>C4</li>
        </ul>
        <ul>
          <ul>
            <li class='chlnode'>C5</li>
          </ul>
        </ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>D</li>
  <ul>
    <li class='chlnode'>D1</li>
    <ul>
      <li class='chlnode'>D4</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>D3</li>
    <ul>
      <li class='chlnode'>D5</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>D6</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>D7</li>
        </ul>
        <ul></ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>E</li>
  <ul>
    <li class='chlnode'>E1</li>
  </ul>
  <li class='mainnode'>F</li>
  <ul>
    <li class='chlnode'>F1</li>
  </ul>
  <li class='mainnode'>G</li>
  <ul>
    <li class='chlnode'>J</li>
    <ul>
      <li class='chlnode'>J1</li>
    </ul>
    <ul></ul>
  </ul>
</ul>

Answer 1

尝试使用以下代码。

$(function() {
  //alert("hello");
  $(".chlnode").parent().hide();
  $(".mainnode").click(function() {
    alert("mainnode is clicking");
    $(".mainnode ~ ul").hide();
    $(this).next('ul').show();
  });
});

我已经更改为 $(".mainnode ~ ul").hide(); 将在我们显示与单击的 li 对应的那个之前隐藏所有 ul。

因为你的 li 没有 child ，只有 sibling ，你可以使用 .next() 或 .siblings()，像这样 $(".mainnode ~ ul").hide();

演示

$(function() {
  //alert("hello");
  $(".chlnode").parent().hide();
  $(".mainnode").click(function() {
    alert("mainnode is clicking");
    $(".mainnode ~ ul").hide();
    $(this).next('ul').show();
  });
});

This is my html code i am generating php file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<ul>
  <li class='mainnode'>A</li>
  <ul>
    <li class='chlnode'>A1</li>
    <ul>
      <li class='chlnode'>A3</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>A2</li>
    <ul>
      <li class='chlnode'>A4</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>A5</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>B</li>
  <ul>
    <li class='chlnode'>B1</li>
    <li class='chlnode'>B2</li>
    <ul>
      <li class='chlnode'>B3</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>B4</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>C</li>
  <ul>
    <li class='chlnode'>C1</li>
    <ul>
      <li class='chlnode'>C2</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>C3</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>C4</li>
        </ul>
        <ul>
          <ul>
            <li class='chlnode'>C5</li>
          </ul>
        </ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>D</li>
  <ul>
    <li class='chlnode'>D1</li>
    <ul>
      <li class='chlnode'>D4</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>D3</li>
    <ul>
      <li class='chlnode'>D5</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>D6</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>D7</li>
        </ul>
        <ul></ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>E</li>
  <ul>
    <li class='chlnode'>E1</li>
  </ul>
  <li class='mainnode'>F</li>
  <ul>
    <li class='chlnode'>F1</li>
  </ul>
  <li class='mainnode'>G</li>
  <ul>
    <li class='chlnode'>J</li>
    <ul>
      <li class='chlnode'>J1</li>
    </ul>
    <ul></ul>
  </ul>
</ul>