如何切换 show/hide 文本，在多个元素上使用相同的代码
How to Toggle show/hide text, with the same code on multiple elements
我如何使用相同的 jquery 代码，将 show/hide 文本添加到我的所有元素上，但只影响一个是点击更多。
因此，当我单击一个时，它们中的多个不会打开。
$(document).ready(function(){
$( ".showBtn " ).click(function() {
$(".textHidden").toggleClass("textShow");
});
});
.textHidden {
display:none;
transition:ease-in-out 1s;
cursor:pointer;
}
.textShow {
display:block;
}
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>
<div style="background-color:red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>
有多种选择。
这是其中之一：
$(document).ready(function(){
$( ".showBtn " ).click(function() {
$(this).parents('div').first().find(".textHidden").toggleClass("textShow");
});
});
.textHidden {
display:none;
transition:ease-in-out 1s;
cursor:pointer;
}
.textShow {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>
<div style="background-color:red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>
找到 div 父级，取第一个，找到其中的隐藏元素并将其切换为 class。
你得到的第二个选项 - 获取当前元素的父元素，找到隐藏的下一个兄弟元素：
$(document).ready(function(){
$( ".showBtn " ).click(function() {
$(this).parent().next(".textHidden").toggleClass("textShow");
});
});
.textHidden {
display:none;
transition:ease-in-out 1s;
cursor:pointer;
}
.textShow {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>
<div style="background-color:red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>
我如何使用相同的 jquery 代码，将 show/hide 文本添加到我的所有元素上，但只影响一个是点击更多。 因此，当我单击一个时，它们中的多个不会打开。
$(document).ready(function(){
$( ".showBtn " ).click(function() {
$(".textHidden").toggleClass("textShow");
});
});
.textHidden {
display:none;
transition:ease-in-out 1s;
cursor:pointer;
}
.textShow {
display:block;
}
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>
<div style="background-color:red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>
有多种选择。
这是其中之一：
$(document).ready(function(){
$( ".showBtn " ).click(function() {
$(this).parents('div').first().find(".textHidden").toggleClass("textShow");
});
});
.textHidden {
display:none;
transition:ease-in-out 1s;
cursor:pointer;
}
.textShow {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>
<div style="background-color:red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>
找到 div 父级，取第一个，找到其中的隐藏元素并将其切换为 class。
你得到的第二个选项 - 获取当前元素的父元素，找到隐藏的下一个兄弟元素：
$(document).ready(function(){
$( ".showBtn " ).click(function() {
$(this).parent().next(".textHidden").toggleClass("textShow");
});
});
.textHidden {
display:none;
transition:ease-in-out 1s;
cursor:pointer;
}
.textShow {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>
<div style="background-color:red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
</p>
<p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
</p>
</div>