javascript - 上下滑动目标div不起作用

Question

晚上好，

我正在尝试使目标 div 上下滑动(如可见和隐藏)。

但是，当指向该函数的链接不在同一行时(例如在同一个 <p> 中)，它们将不起作用。只是第一个出现，然后就不起作用了......什么也没有发生。另外，当我单击打开的 <div> 的链接时，它应该隐藏。再次。但事实并非如此……

有代码，我不知道为什么它不能正常工作......谢谢您的帮助!

JS:

    <script>
jQuery(function () {
    jQuery('.showSingle').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.targetDiv').eq(index).slideDown();
        jQuery('.targetDiv').not(newTarget).slideUp();

    });
});
 </script> 

HTML(链接的无效版本):

<table width="80%" border="0" align="center">
<tr width="100%"><td width="35%">
 <p align="center" style="font-size: 25px; color: ;"><a class="showSingle" target="1">Životní krizové situace<br />
 <span style="font-size:16px;">„Dovolte mi pracovat s Vámi, když jste v krizi.“</a></p>
</td>

<td width="30%">&nbsp;</td>

<td width="35%">
 <p align="center" style="font-size: 25px; color: ;"><a class="showSingle" target="2">Relaxace, meditace, imaginace<br />
 <span style="font-size:16px;">„Zastavte se a načerpejte sílu.“</a></p>
</td>
</tr> 

 </td>
</tr>
</table>

HTML(工作环版本的链接):

<p align="center" style="font-size: 22px; color: white; line-height: 55px;"><a class="showSingle" target="1">VIP Inkaso</a>
&nbsp;&nbsp;
<a class="showSingle" target="2">Vystěhování nájemníků</a>
&nbsp;&nbsp;
<a class="showSingle" target="3">Vymáhání pohledávek</a></p>

HTML(目标 div):

<div id="div1" class="targetDiv">
$text
</div>

<div id="div2" class="targetDiv">
text
</div>

CSS:

   .targetDiv {
    display: none
}

Answer 1

你可以试试这个:

jQuery(function () {
    jQuery('.showSingle').click(function () {
        var index = jQuery('.showSingle').index($(this));
        jQuery('.targetDiv').eq(index).slideToggle().siblings('.targetDiv').slideUp();
       //up here, toggle the selected and closes the remaining

    });
});

在这种情况下，该函数还会上下移动元素 .targetDiv