限定JavaScript的作用範圍：如何只對特定元素進行操作？

Question

我有一個非常簡單的JS程式碼，它只做了一件事，就是在頁面上的特定元素上切換一個open類別。問題是，我有4個重複的.clickSlide元素和.sub_menu元素，當我點擊其中一個元素觸發程式碼時，所有元素都會得到open#類。只有其中一個關注的元素應該得到open類別。

我最好的猜測是在JS中缺少某種this。但我對這個問題的解決方案持開放態度！

jQuery(document).ready(function($) {
  $(".clickSlide").click(function() {
    $(".sub_menu").toggleClass("open");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ht_course_one">
  <ul class="select-menu dropdown">
    <li class="clickSlide">
      <ul class="sub_menu">
        <li></li>
      </ul>
    </li>
  </ul>
</div>

<div class="ht_course_two">
  <ul class="select-menu">
    <li class="clickSlide">
      <ul class="sub_menu">
        <li></li>
      </ul>
    </li>
  </ul>
</div>

<div class="ht_course_three">
  <ul class="select-menu">
    <li class="clickSlide">
      <ul class="sub_menu">
        <li></li>
      </ul>
    </li>
  </ul>
</div>

<div class="ht_course_four">
  <ul class="select-menu">
    <li class="clickSlide">
      <ul class="sub_menu">
        <li></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

所以解決方案（基於Anass Kartit的回答）是這樣的：

jQuery(document).ready(function($) {
    $(".clickSlide").click(function(){
        $(this).children(".sub_menu").toggleClass("open");
    });
});