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

Question

我需要侧边菜单导航方面的帮助。

单击主菜单“Divisions”链接时，我应该显示子元素，即链接1、链接2、链接3等。

如果我再次点击主菜单“Divisions”链接，应隐藏子项（应隐藏链接1、链接2、链接3）。

到目前为止，我已经在 javascript 中尝试过

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

和要隐藏的 CSS

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

但不成功，如何在 jquery 或 Javascript 中做到这一点。

谁能帮忙解决这个问题。

请检查这个 JS FIDDLE 链接： http://jsfiddle.net/a3x004fs/

HTML

<ul class="vlist">
  <li id="p968" class="active">
    <strong>Divisions</strong>
    <ul>
      <li id="p981"><a href="link1.html" >link1</a></li>
      <li id="p982"><a href="link2.html" >link2</a></li>
      <li id="p983"><a href="link3.html" >link3</a></li>
      <li id="p1064"><a href="link4.html" >link4</a></li>
    </ul>
  </li>
  <li id="p969"><a href="#">mainlink2</a></li>
  <li id="p96955"><a href="#">mainlin3</a></li>
  <li id="p989"><a href="#">mainlink4</a></li>
</ul>

CSS

@media all
{
    /* title */
    h6.vlist {
        font-weight:bold;
        font-size:100%;
        width:90%;
        padding:3px 0px 3px 10%; /* LTR */
        margin:0;
        color:#444;
        background-color:#fff;
        border-top:2px #ddd solid;
        border-bottom:4px #888 solid;
    }

    .vlist {
        width:100%;
        overflow:hidden;
        margin:0 0 1.5em 0;
        list-style-type:none;
    }

    .vlist ul {
        list-style-type:none;
        margin:0;
        padding:0;
    }

    .vlist li {
        float:left; /* LTR */
        width:100%;
        margin:0;
        padding:0;
    }

    .vlist a,
    .vlist strong,
    .vlist span {
        display:block;
        padding:3px 0px 3px 10%;
        text-decoration:none;
        border-bottom:1px #ddd solid;
    }

    .vlist a,
    .vlist a:visited {
        color:#444;
        text-decoration: none;
    }



    /* active list element */
    .vlist li.active {
        color:#fff;
        background-color:#800;
        font-weight:bold;
    }

    /* Level 1 */
    .vlist li a,
    .vlist li strong,
    .vlist li span { width:95%; padding-left:5%; } /* LTR */

    .vlist li a:focus,
    .vlist li a:hover,
    .vlist li a:active { background-color:#a88; color:#fff; outline: 0 none; }

    /* Level 2 */
    .vlist li ul li a,
    .vlist li ul li strong,
    .vlist li ul li span { width:95%; padding-left:5%; } /* LTR */

    .vlist li ul li a, 
    .vlist li ul li a:visited { background-color:#f8f8f8; color:#333; }
    .vlist li ul li a:focus,
    .vlist li ul li a:hover,
    .vlist li ul li a:active { background-color:#a88; color:#fff; }

Answer 1

添加脚本 jQuery 到你的 head 标签

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您可以使用 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：

完全忘记了您实际上必须单击子<li> 元素。好的，代码是相同的，只要它是一个孩子，就不要让事件传播到 父母就是这样。更新小提琴

工作演示：Updated JS Fiddle

Answer 2

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

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

我已在“链接”类中添加了指向要隐藏的li's。

JSFIDDLE

Answer 3

You can simply use toggl function of jquery:- 



$("#p968").toggle(function () {
        $('#tackle').hide();
    }, function () {
        $('#tackle').show();
    });

<ul class="vlist">
    <li id="p968" class="active"><strong>Divisions</strong>
        <ul id="tackle">
            <li id="p981"><a href="link1.html">link1</a></li>
            <li id="p982"><a href="link2.html">link2</a></li>
            <li id="p983"><a href="link3.html">link3</a></li>
            <li id="p1064"><a href="link4.html">link4</a></li>
        </ul>
    </li>
    <li id="p969"><a href="#">mainlink2</a></li>
    <li id="p96955"><a href="#">mainlin3</a></li>
    <li id="p989"><a href="#">mainlink4</a></li>
</ul>

Answer 4

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

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

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