jQuery .slideToggle()

Question

我在 JQuery 中使用 slideToggle() 来显示一个 div。 但这不起作用。

我做了不同的测试，但没有任何效果......

我有这个：

<div class="domaine">
<a>1. Compétences Scientifiques Transversales</a>
<br>
<div class="ssdomaine" style="display: none;">
    <a>1.1. Sciences et techniques</a>
    <br>
    <div class="competence" style="display: none;">
        <a href="#">1.1.1. Génie thermique et thermodynamique</a>
        <br>
    </div>
</div>

这里只是一个包含单个“ssdomaine”的“domaine”，其中包含一个“competence”

但是我在一个数据库中提出了一个请求，该请求可以向我发送多个包含多个“ssdomaine”的“domaine”，其中包含多个“ssdomaine”。

我想制作一个 .slideToggle() 而不指定任何 id。

我的 JQuery 代码是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $('.ssdomaine').hide();
    $('.competence').hide();
   $('.domaine a').click(function() {
      $(this).next('.ssdomaine').slideToggle(1000);
      return false;
   });
   $('.ssdomaine a').click(function() {
          $(this).next('.competence').slideToggle(1000);
          return false;
    });
 });
</script>

我在这个链接中尝试了同样的方法： http://jsfiddle.net/6GRJr/168/

它正在工作，但它只出现在 domaine、ssdomaine 和权限的一次出现上。

有什么想法吗？

Answer 1

这和height有关，看看这个小提琴http://jsfiddle.net/6GRJr/169/

更新

它不显示competence 的原因是因为它在您加载表单时被隐藏，而当您在ssdomaine 上执行slideToggle 时，它使ssdomaine 只可见而不是权限

更新

应该这样做http://jsfiddle.net/6GRJr/172/

Answer 2

jQuery 的 slideToggle() 充其量是错误的。幸运的是，HTML5 中有一个新功能可以在没有 JavaScript 的情况下提供此功能！

查看新的 HTML5 标签：

http://www.w3schools.com/tags/tag_details.asp

Answer 3

.next 只查看直接兄弟，添加选择器只检查该元素是否与选择器匹配，.nextAll('.selector') 是要走的路，但会返回一个元素集合，所以你可能想要限制集合使用.first()

$(document).ready(function() {
   $('.ssdomaine').hide();
    $('.competence').hide();
   $('.domaine a').click(function() {
      // next only looks at the immediate sibling, which in you code is a <br />
      //$(this).next('.ssdomaine').slideToggle(1000);


      // this would open all elements
      $(this).nextAll('.ssdomaine').slideToggle(1000); 

或

      // this would open this first instance of .ssdomaine
      $(this).nextAll('.ssdomaine').first().slideToggle(1000);

      return false;
   });
   $('.ssdomaine a').click(function() {
          $(this).next('.competence').slideToggle(1000);
          return false;
    });
 });