JQuery slideToggle函数问题/如何

我试图用JQuery和slideToggle（）来滑动隐藏的行，当它点击一个特定的标题。我试图用1个jQuery语句来做到这一点。我知道我可以为每个div标签创建一个id，并为单击的每个“标题行”分别设置一个函数，但我真的不想这样做。JQuery slideToggle函数问题/如何

在下面的代码示例中，我只能得到第一行做slideToggle，但我无法弄清楚当点击'标题行'时如何让其他人滑动。

任何帮助将不胜感激。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(this).click(function(){ 
    $("#Content").slideToggle("slow"); /* Using this only toggles the first set of data */ 

    }); 
}); 
</script> 
</head> 
<body> 
<div> 
    <!-- Row 1 --> 
    <div id="Label"> 
     1st Header: 
    </div> 
    <div id="Content"> 
     Data 1 
     <br /> 
     Data 2 
    </div> 

    <!-- Row 2 --> 
    <div id="Label"> 
     2nd Header 
    </div> 
    <div id="Content"> 
     Data 3 
     <br /> 
     Data 4 
    </div> 
</div> 
</body> 
</html>

来源

2015-09-25 Michael D

复制'＃Label'，'＃'Content'在id's' html'？元素的'id'应该在'DOM'中是唯一的 – guest271314

你有很多具有相同id的元素，选择器将只选择第一个catched的元素，所以你应该使用Class，看看我的回答 – Diptox

Demo

<div> 
    <!-- Row 1 --> 
    <div class="Label"> 
     1st Header: 
    </div> 
    <div class="Content"> 
     Data 1 
     <br /> 
     Data 2 
    </div> 

    <!-- Row 2 --> 
    <div class="Label"> 
     2nd Header 
    </div> 
    <div class="Content"> 
     Data 3 
     <br /> 
     Data 4 
    </div> 
</div>

的Javascript

$(document).ready(function() 
{ 
    $(".Label").click(function() 
    { 
     $(this).next().stop().slideToggle("slow"); 
    }); 
});

来源

2015-09-25 20:48:43 Diptox

这很好用。谢谢。 –

不客气：D – Diptox

你要完成什么是非常简单，有许多方法来完成它。下面是一个简单的方法，依赖于头像和内容的顺序，就像上面的顺序一样，但首先不要创建重复的ID。你希望所有的id都是唯一的，因为多种原因。

你想要做的是改变它，所以标题有一个类和内容有另一个类。 https://jsfiddle.net/n1e7w5fL/1/

这是HTML

<div> 
<!-- Row 1 --> 
<div class="clickHeader"> 
    1st Header: 
</div> 
<div class="clickTarget"> 
    Data 1 
    <br /> 
    Data 2 
</div> 

<!-- Row 2 --> 
<div class="clickHeader"> 
    2nd Header 
</div> 
<div class="clickTarget"> 
    Data 3 
    <br /> 
    Data 4 
</div>

这是jQuery的切换他们

$(document).ready(function(){ 
    $(".clickHeader").on("click", function(){ 
     $(this).next(".clickTarget").slideToggle("slow"); 
    }); 
});

来源

2015-09-25 20:58:25 Tom

感谢您链接到JSFiddle.net。这将最终变得非常方便！并感谢您的代码示例。 –

迈克尔当然可以......你标记为正确的答案也是完全有效的。 – Tom

JQuery slideToggle函数问题/如何

回答

相关问题