点击时打开类别

-1

点击并关闭时如何打开类别。点击时打开类别

我发现了一个教程（http://plnkr.co/edit/ReNCjeCN8qwxI58RaMRd?p=preview），但点击时只显示第一个链接。如何使每个项目完全显示在菜单中？

代码：

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="windows-1251"> 
    <title>Выпадающий текст при нажатии на ссылку с помощью jQuery</title> 
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script> 
     $(".link").click(function() { 
      $("this").find(".nested_menu").slideToggle("slow"); 
      $(this).toggleClass("active"); return false; 
     }); 
    </script> 
    <style> 
     .nasted_menu {  
      display: none; 
      padding: 5px; 
      width: 400px; 
      height: 200px; 
      background: #09F; 
      color: #FFF; 
      } 
     .link { 
      background: #CCC; 
      color: #06F; 
      } 
     .active { 
      background: #FF9; 
      } 
    </style> 
</head> 
<body> 
    <ul> 
    <li class="link">Link1 
    <ul class="nested_menu"> 
     <li>Nested point</li> 
    </ul> 
    </li> 
    <li class="link">Link2 
    ... 
    </li> 
</ul> 
</body> 
</html>

来源

2016-06-10 TriSTaR

你能分享你的代码吗？ =） –

@RudolfManusadzhyan 用什么代码？ – TriSTaR

你的代码与菜单..其中超过1链接=），然后我们可能会明白什么是错=） –

$(function() { 
 
    $(".btn-slide").click(function() { 
 
    $(this).next("#panel").slideToggle("slow");//use $(this) to get the clicked btnslide 
 
    $(this).toggleClass("active"); 
 
    return false; 
 
    }); 
 
});

#panel { 
 
    display: none; 
 
    padding: 5px; 
 
    width: 400px; 
 
    height: 200px; 
 
    background: #09F; 
 
    color: #FFF; 
 
} 
 
.btn-slide { 
 
    background: #CCC; 
 
    color: #06F; 
 
} 
 
.active { 
 
    background: #FF9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" class="btn-slide">Click Me</a> 
 
<div id="panel"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex 
 
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
 
    duis dolore te feugait nulla facilisi. 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<a href="" class="btn-slide">Click Me 2</a> 
 
<div id="panel"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<a href="" class="btn-slide">Click Me 3</a> 
 
<div id="panel"> 
 
    at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
</div>

使用$(this)获得点击btnslide
使用.next()获得点击btnslide的内容

来源

2016-06-10 05:49:21 guradio

谢谢你））） – TriSTaR

@TriSTaR乐于帮助队友 – guradio

['id'属性必须是唯一的。]（https://www.w3.org/TR/html5/ dom.html＃的-ID属性） –

UPD。固定$("this") =>$(this)。

$(".link").click(function() { 
 
    $(this).find(".nested_menu").slideToggle("slow"); 
 
    $(this).toggleClass("active"); return false; 
 
});

.nested_menu {  
 
    display: none; 
 
    padding: 5px; 
 
    width: 400px; 
 
    height: 200px; 
 
    background: #09F; 
 
    color: #FFF; 
 
} 
 
.link { 
 
    background: #CCC; 
 
    color: #06F; 
 
} 
 
.active { 
 
    background: #FF9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="link">Link1 
 
    <ul class="nested_menu"> 
 
     <li>Nested point</li> 
 
    </ul> 
 
    </li> 
 
    <li class="link">Link2 
 
    ... 
 
    </li> 
 
</ul>

来源

2016-06-10 05:36:37

这样呢？ http://plnkr.co/edit/ReNCjeCN8qwxI58RaMRd?p=preview我很抱歉，如果我不明白:( – TriSTaR

是啊，男人。我的坏。而不是'$（“this”）'我应该使用'$这个）'（不含引号）=） –

点击时打开类别

回答

相关问题