Question

如果可能，我会非常感谢一些帮助吗？

提前感谢任何花时间回应的人！

这是我的问题。

我有两个相同的div连成一排。它们包含一个h3和一个p。点击h3我希望它滑动切换p。

的显示

slideToggle在第一个div上正常工作，但在第二个div上它根本没有任何影响。

我可能会出错的任何想法？

我的代码如下......

HTML

<section class="twocol">
<div id="accordionPanel">
<h3 class="accordionControl">This is the title of the content area</h3>
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p>
</div>
</section>

<section class="twocol">
<div id="accordionPanel">
<h3 class="accordionControl">This is the title of the content area</h3>
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p>
</div>
</section>

CSS

#accordionPanel {
@include lightgreygradient;}

.accordionControl {   
&:hover {cursor: pointer;}
}

.accordionText {display:none;}

Javascript

$('#accordionPanel').on('click', '.accordionControl', function (e) {
e.preventDefault();
$(this).next('.accordionText').not(':animated').slideToggle();  
});

Answer 1

你有两个具有相同ID <div id="accordionPanel">的div，而是使用一个类：<div class="accordionPanel">，然后你的javascript将使用该类来引用该元素：

$('.accordionPanel').on('click', '.accordionControl', function (e) {
    e.preventDefault();
    $(this).next('.accordionText').not(':animated').slideToggle();  
});

Answer 2

只需将代码中的$('#accordionPanel')替换为$(document)

即可

＆＃13;

$(document).on('click', '.accordionControl', function (e) {
e.preventDefault();
$(this).next('.accordionText').not(':animated').slideToggle();  
});

＆＃13;

<section class="twocol">
<div id="accordionPanel">
<h3 class="accordionControl">This is the title of the content area</h3>
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p>
</div>
</section>

<section class="twocol">
<div id="accordionPanel">
<h3 class="accordionControl">This is the title of the content area</h3>
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p>
</div>
</section>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

＆＃13;

Answer 3

您有多个HTML元素具有相同的id值，即'accordionPanel'。您应该始终拥有所有HTML元素的唯一ID。因此，您可能希望在此处使用类名来绑定操作。

$('.twocol').on('click', '.accordionControl', function (e) {
  e.preventDefault();
  $(this).parent('.twocol').find('.accordionText').not(':animated').slideToggle();
});

使用jQuery slideToggle的两个相同的Div，但只有其中一个正在工作。

3 个答案: