Question

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

点击主菜单“Divisions”链接，我应该显示子元素，即link1，link2，link3等。

如果我再次单击主菜单“Divisions”链接，则应隐藏子项（link1，link2，link3应隐藏）。

到目前为止，我已经在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添加到头标记

<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

    {
        "aps" : {
            "content-available" : 1,
            "sound" : ""
        },
        "chat-message" : "Hello World!"
    }

Answer 3

另一种方法是简单地添加一个类来显示你曾用display:none隐藏的'li'，然后添加这个jquery：

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

我已将“链接”添加到您想要隐藏的li's。

<强> JSFIDDLE

Answer 4

在代码中添加css和JS的代码块。

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

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

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

4 个答案:

编辑2：