Question

我有这种垂直菜单： -

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();
     });
});

正如你所看到的，它可以切换所有元素。我如何获得理想的结果。我在SO上搜索并尝试了一些答案，但似乎它们在我的情况下不起作用。

更新： -

这是html代码（以haml为单位）

- @destinations.group_by(&:continent).each do |continent, ds_per_continent|
                %ul(class = "continent_name")
                    %li=link_to continent, "#"
                - ds_per_continent.group_by(&:country).each do |country, ds_per_country|
                    %ul(class = "country_name")
                        %li=link_to country, "#"
                    - ds_per_country.each do |destination|
                        %ul(class = "city_name")
                            %li=link_to destination.name, destination_path(destination)

Answer 1

使用此：

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

A Live Example

我还建议您尝试外包树的需求，我更喜欢dynaTree插件。

Answer 2

在click事件处理程序中，使用$(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();
     });
});

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

2 个答案: