单击“显示或隐藏javascript或jquery中的子链接”

我需要关于侧菜单导航的帮助

单击主菜单的Divisions链接，我应该显示子元素，它们是link1、link2、link3等

若我再次单击主菜单分区链接，子项应隐藏link1、link2、link3应隐藏

到目前为止，我已经尝试使用javascript

var x = document.getElementById("p968").className = "classToKeep";

和CSS隐藏

.classToKeep{
      color:#fff;
      }
       .classToKeep ul{
      display:none;
      } 

但是没有成功，如何在jquery或Javascript中做到这一点

有人能帮忙吗

请检查这个 JS FIDDLE链接：

HTML

---

将脚本jQuery添加到head标记中

可以使用jQuery显示隐藏菜单

$('li').on('click',function(e){
    var that = $(this);
    if(that.parents('ul').length>1){
        e.stopPropagation()
        return true;
    }else if(that.find('ul').length>0){
        that.toggleClass('classToKeep')
    }
});

编辑2： 完全忘记了您实际上必须单击子元素。好的，代码是一样的，只是如果它是一个孩子，我只是不让事件传播到 家长：仅此而已。更新小提琴

---

工作演示：

将脚本jQuery添加到头标记中

可以使用jQuery显示隐藏菜单

$('li').on('click',function(e){
    var that = $(this);
    if(that.parents('ul').length>1){
        e.stopPropagation()
        return true;
    }else if(that.find('ul').length>0){
        that.toggleClass('classToKeep')
    }
});

编辑2： 完全忘记了您实际上必须单击子元素。好的，代码是一样的，只是如果它是一个孩子，我只是不让事件传播到 家长：仅此而已。更新小提琴

---

工作演示：

另一种方法是简单地添加一个类来显示您先前使用display:none隐藏的“li”，然后添加以下jquery:

$('.active').click(function () {
                $('.link').toggleClass("hidden"); 
            });

我已经在类中添加了li's你想隐藏的链接

---

另一种方法是简单地添加一个类来显示您以前使用display:none隐藏的“li”，然后添加以下jquery:

$('.active').click(function () {
                $('.link').toggleClass("hidden"); 
            });

我已经在类中添加了li's你想隐藏的链接

---

在代码中添加css和JS的这两个代码块

.classToKeep{
     color:#fff;
  }
   .classToKeep ul{
      display:none;
  } 

$("#p968").click(function(){   
   $(this).toggleClass("classToKeep")
});

---

在代码中添加css和JS的这两个代码块

.classToKeep{
     color:#fff;
  }
   .classToKeep ul{
      display:none;
  } 

$("#p968").click(function(){   
   $(this).toggleClass("classToKeep")
});

---

---

更新了答案中的fiddle。不知怎的，js不是sticking@joyBlanks谢谢你，朋友。我现在就去查一下，然后再回去you@joyBlanks不幸的是，它是在JSFIDLE中工作的，而不是在网站中。错误：uncaughttypeerror:$不是一个函数。将脚本jQuery添加到头标签@joyBlanks中：最好提供最新的插件，而不是旧的插件。这里给出的是可能不支持所有jquery特性的2.1.1。如果未添加，请尝试在答案中添加此更新的小提琴。不知怎的，js不是sticking@joyBlanks谢谢你，朋友。我现在就去查一下，然后再回去you@joyBlanks不幸的是，它是在JSFIDLE中工作的，而不是在网站中。错误：uncaughttypeerror:$不是一个函数。将脚本jQuery添加到头标签@joyBlanks中：最好提供最新的插件，而不是旧的插件。这里给出的是可能不支持所有jquery特性的2.1.1。如果没有添加，请尝试添加此项。您是否检查了作为答案发布的代码？您是否添加了此项-1:-我是jquery的新学员……您也可以直接问问题……这就像为我学习一样-@代码显示，在这里，如果我单击link1，分区也将关闭。你能查一查小提琴吗？你查了你作为答案发布的代码了吗？你有没有加上这个-1:-我是jquery的新学员……你也可以直接问问题……这对我来说就像是在学习……：-@代码显示，在这里，如果我单击link1，分区也将关闭。你能查一查小提琴吗？请问你答案。但小问题是，当我在link1儿童频道时，这并不是结束“分裂”。你能帮我一下吗？我不明白你的意见，伙计。无论您单击链接1、链接2、链接3、链接4或分区，所有链接都将隐藏。如果单击link1，则不应关闭分区。>那很容易。我刚刚用一个类将divisions文本包装在一个div中，并更改了jquery，这样您就可以在点击这个活动整体的预言时打开和关闭li：谢谢您的回答。但小问题是，当我在link1儿童频道时，这并不是结束“分裂”。你能帮我一下吗？我不明白你的意见，伙计。无论您单击链接1、链接2、链接3、链接4或分区，所有链接都将隐藏。如果单击link1，则不应关闭分区。>那很容易。我刚刚用一个类将分区文本包装在一个div中，并更改了jquery，这样您就可以在点击这个活动整体的图标时打开和关闭分区：这里，如果我点击link1，分区也将关闭。你能检查一下小提琴吗？这是因为那些孩子李在id=p968的父母李里面。因此，您只需在父li标记内的span标记中放置分割文本，并对其执行子隐藏/显示操作，即可稍微更改HTML结构。工作小提琴：在这里，如果我单击link1，分区也将关闭。你能检查一下小提琴吗？这是因为那些孩子李在id=p968的父母李里面。因此，您只需在父li标记内的span标记中放置分割文本，并对其执行子隐藏/显示操作，即可稍微更改HTML结构。工作小提琴：