两个具有 jQuery slideToggle 的相同 Div，但其中只有一个有效。

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，请改用 class：<div class="accordionPanel">，然后您的 javascript 将使用 [=15] 引用该元素=] 而不是：

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

Answer 2

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

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

<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>

Answer 3

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

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

两个具有 jQuery slideToggle 的相同 Div，但其中只有一个有效。

Two Identical Divs with jQuery slideToggle, but only one of them is working.

jquery

slidetoggle