使.toggleClass（）只影响jQuery中单击时具有相同类的一个元素

Question

我正在尝试使用jQuery制作下拉菜单。我的脚本在点击时影响所有具有相同类的元素的问题。以下是我在代码段中的问题：

$(document).ready(function() {
  $('.parent').click(function() {
    $('.sub-nav').toggleClass('visible');
  });
});

#nav ul.sub-nav {
  display: none;
}

#nav ul.visible {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li class="parent">Home
    <ul class="sub-nav">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </li>
  <li class="parent">About
    <ul class="sub-nav">
      <li>Johnny</li>
      <li>Julie</li>
      <li>Jamie</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

我试图玩弄：

$(document)
    .ready(function () {
    $('.parent')
        .click(function () {
        $(this).children('.sub-nav').toggleClass('visible');
    });
});

但没有任何不错的结果。有人能告诉我哪里错过了这一点吗？非常感谢所有可能的帮助，期待。

Answer 1

$(document).ready(function() {
  $('.parent').click(function() {
  $('.parent').not(this).find('.sub-nav.visible').removeClass('visible');
    $('.sub-nav',this).toggleClass('visible');//find .sub-nav of clicked .parent
  });
});

#nav ul.sub-nav {
  display: none;
}

#nav ul.visible {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li class="parent">Home
    <ul class="sub-nav">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </li>
  <li class="parent">About
    <ul class="sub-nav">
      <li>Johnny</li>
      <li>Julie</li>
      <li>Jamie</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

1. 使用this上下文
2. 获取点击的父级

Answer 2

试试这个：

$(document).ready(function() {
  $('.parent').click(function() {
    $(this).children('.sub-nav').toggleClass('visible');
  });
});

#nav ul.sub-nav {
  display: none;
}

#nav ul.visible {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li class="parent">Home
    <ul class="sub-nav">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </li>
  <li class="parent">About
    <ul class="sub-nav">
      <li>Johnny</li>
      <li>Julie</li>
      <li>Jamie</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

Answer 3

将当前对象与此关键字一起使用：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.parent').click(function() {
    $(this).children('.sub-nav').toggleClass('visible');
  });
});

＆＃13;

#nav ul.sub-nav {
  display: none;
}

#nav ul.visible {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li class="parent">Home
    <ul class="sub-nav">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </li>
  <li class="parent">About
    <ul class="sub-nav">
      <li>Johnny</li>
      <li>Julie</li>
      <li>Jamie</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

＆＃13;

＆＃13;

＆＃13;