基于树的导航，仅切换单击的元素Jquery

我有这种垂直菜单：-

Europe
 France
  Paris
 Germany
  Berlin

Asia
 India
  New Delhi
  Lucknow
 Bangladesh
  Dhaka

我想要实现的是，如果我点击亚洲，只有亚洲内部的元素应该开放，即只有亚洲的国家（而不是现在的城市），当我点击该国时，只有该国的城市应该开放

我的Jquery如下所示：-

$(document).ready(function(){
     $('.country_name').hide();
     $('.city_name').hide();
     $('.continent_name').click(function(){

        $('.country_name').toggle(); 

        $('.city_name').hide();
     });

     $('.country_name').click(function(){

        $('.city_name').toggle();
     });
});

如您所见，它切换所有元素。我怎样才能得到想要的结果呢。我做了这么多的搜索，并尝试了几个答案，但似乎他们在我的情况下不工作

更新：-

这是html代码（它是用haml编写的）

---

在

单击事件处理程序中，使用
$（this）
选择器引用单击的元素

$(document).ready(function(){
     $('.country_name').hide();
     $('.city_name').hide();
     $('.continent_name').click(function(){

        $(this).find('.country_name').toggle();

        $('.city_name').hide();
     });

     $('.country_name').click(function(){

        $(this).find('.city_name').toggle();
     });
});

在
单击事件处理程序中，使用
$（this）
选择器引用单击的元素

$(document).ready(function(){
     $('.country_name').hide();
     $('.city_name').hide();
     $('.continent_name').click(function(){

        $(this).find('.country_name').toggle();

        $('.city_name').hide();
     });

     $('.country_name').click(function(){

        $(this).find('.city_name').toggle();
     });
});

使用以下命令：

$("li").click(function(event) {
  $(this).children().toggle();
  event.stopPropagation();
});


我还建议您尝试外包您的树需求，我更喜欢插件。
使用以下方法：

$("li").click(function(event) {
  $(this).children().toggle();
  event.stopPropagation();
});


我还建议您尝试外包您的树需求，我更喜欢插件。
我假设您的国家元素是大陆元素的子元素。如果不是这样，你必须调整选择器。如果没有html代码，就很难判断出哪里出了问题。我假设您的country元素是Continental元素的子元素。如果不是这样，你必须调整选择器。如果没有html代码，就很难判断出问题所在。