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>

​

这里只有一个"domaine“，其中只包含一个"ssdomaine”，而“ssdomaine”中只包含一个“能力”。

但是我在一个数据库中做了一个请求，它可以给我发送多个"domaine“，其中包含多个"ssdomaine”，其中包含多个"ssdomaine“。

我想创建一个不指定任何id的.slideToggle()。

我的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/

它是有效的，但它只出现在一个领域，领域和能力。

有什么想法吗？

Answer 1

它与height有关，看看这个http://jsfiddle.net/6GRJr/169/

更新

它不显示competence的原因是，当您加载表单时，它是隐藏的，并且当您在ssdomaine上执行slideToggle时，它也会使ssdomaine仅可见而不是能力

更新

这应该可以了，http://jsfiddle.net/6GRJr/172/

Answer 2

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

查看新的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;
    });
 });