Question

我使用这个花哨的jQuery函数来切换一些类：

$( "#main-nav .menu-wrapper .menu li.has-sub a" ).click(function() {
  $(this).find("ul.sub").toggleClass( "visible" );
});

这不起作用，因为我的HTML结构有点不同：

<div id="main-nav>
    <nav class="menu-wrapper">
        <ul class="menu">
            <li class="has-sub"><a href="#">Lorem Ipsum</a>
                <ul class="sub"><li><a href="#">Dolor Sit</a></li></ul>
            <li>
        </ul>
    </nav>
</div>

尽管如此，ul.sub不是.menu li.has-sub a的孩子，而是.menu li.has-sub的孩子（没有a）。有没有办法选择这个 li？

的孩子

Answer 1

有针对性的两个主要元素分别是li.has-sub的兄弟和孩子。您需要遍历到最近的$( "#main-nav .menu-wrapper .menu li.has-sub a" ).click(function() { $(this).closest('.has-sub').find("ul.sub").toggleClass( "visible" ); });，然后在其中找到ul元素：

$( "#main-nav .menu-wrapper .menu li.has-sub a" ).click(function() {
  $(this).closest('.has-sub').find("ul.sub").toggleClass( "visible" );
});

.visible{background : grey}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-nav">
    <nav class="menu-wrapper">
        <ul class="menu">
            <li class="has-sub"><a href="#">Lorem Ipsum</a>
                <ul class="sub"><li><a href="#">Dolor Sit</a></li></ul>
            <li>
        </ul>
    </nav>
</div>

var server=require('node-http-server');

server.deploy(
    {
        port:8000,
        root:'~/myApp/',
        https:{
            privateKey:`/path/to/your/certs/private/server.key`,
            certificate:`/path/to/your/certs/server.pub`,
            port:4433
        }
    }
);

Answer 2

只需使用.next()

即可

$("#main-nav .menu-wrapper .menu li.has-sub a").click(function() {
  $(this).next("ul.sub").toggleClass("visible");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-nav">
  <nav class="menu-wrapper">
    <ul class="menu">
      <li class="has-sub"><a href="#">Lorem Ipsum</a>
        <ul class="sub">
          <li><a href="#">Dolor Sit</a>
          </li>
        </ul>
    </ul>
  </nav>
</div>

jQuery切换孩子的类

2 个答案: