Question

晚上好，

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

但是当该功能不在同一行时（例如在同一行$(".FIRST").click(function() { if (evt.target.tagName != 'UL') return; $(this).toggleClass('active'); });});中），该功能的链接不起作用。只是第一个出现，然后它只是没有工作......没有任何事情发生。此外，当我再次点击链接到打开的<p>时，它应该隐藏。但它没有......

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

JS：

<div>

HTML（不是链接的工作版本）：

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

    });
});
 </script>

HTML（wokring版本的链接）：

<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（目标div）：

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

CSS：

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

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

Answer 1

您只需将var index = $(this).index()更改为var index = $('.showSingle').index($(this))：

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

   .targetDiv {
     display: none
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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.“</span></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.“</span></a>
      </p>
    </td>
  </tr>

</table>


<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>

<div id="div1" class="targetDiv">
  text in div 1
</div>

<div id="div2" class="targetDiv">
  text in div 2
</div>

Answer 2

你可以试试这个：

＆＃13;

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

    });
});

＆＃13;

在这种情况下，该函数也会在元素.targetDiv

中上下移动

Answer 3

你的jquery有点不对，使用.index()将始终为0，所以不要使用它。你可以通过.attr()获得.showSingle的目标。

   <script>
   jQuery(function () {
   jQuery('.showSingle').click(function () {
      var index = $(this).attr('target')-1, //subtract 1 because element index is start from 0
        newTarget = jQuery('.targetDiv').eq(index).slideDown();
      jQuery('.targetDiv').not(newTarget).slideUp();

    });
  });
  </script>

上下滑动目标div并不起作用

3 个答案: