Question

单击a li标记内的链接时，我试图使用jQuery隐藏和显示div，但是我无法获取DOM元素。 ul ul> li脚本运行正常

  <a class="showSingle " >All Test </a> //Work Fine

$(function() {
  //   $('.showSingle ul.list-inline li a').click(function () {
  $('.showSingle ').click(function() {
    $(this).siblings('.targetDiv ').slideToggle('fast');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-inline text-center">
  <li>
    <a class="showSingle">View next </a><i class="fas fa-arrow-circle-down"></i>
  </li>

我添加了jsfiddler来解释漏洞问题https://jsfiddle.net/mpef13qu/4/

Answer 1

我认为没有任何问题，您只是错过了目标：/

更新：我更改了代码段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="list-inline text-center">
     <li>
        <a class="showSingle">View next </a>
        <i class="fas fa-arrow-circle-down"></i>
     </li>
  </ul>

  <div class="targetDiv" style="display: none">Some text</div>
</div>

<div>
  <ul class="list-inline text-center">
     <li>
        <a class="showSingle">View next </a>
        <i class="fas fa-arrow-circle-down"></i>
     </li>
  </ul>

  <div class="targetDiv" style="display: none">Some text</div>
</div>

<div>
  <ul class="list-inline text-center">
     <li>
        <a class="showSingle">View next </a>
        <i class="fas fa-arrow-circle-down"></i>
     </li>
  </ul>

  <div class="targetDiv" style="display: none">Some text</div>
</div>

<div>
  <ul class="list-inline text-center">
     <li>
        <a class="showSingle">View next </a>
        <i class="fas fa-arrow-circle-down"></i>
     </li>
  </ul>

  <div class="targetDiv" style="display: none">Some text</div>
</div>

<div>
  <ul class="list-inline text-center">
     <li>
        <a class="showSingle">View next </a>
        <i class="fas fa-arrow-circle-down"></i>
     </li>
  </ul>

  <div class="targetDiv" style="display: none">Some text</div>
</div>

void strIntersect(char *str1, char *str2, char *str3)
{
int i,j, k;
i = 0;
j = 0;
k = 0;
while(str1[i]!='\0' || str2[j]!='\0')
{
    if(strcmp(str1[i],str2[j])>0)
    {
        str3[k] = str1[i];
        k++;
    }
    else if (strcmp(str2[j],str1[i])>0)
    {
        str3[k] = str2[j];
        k++;
    }
i++;
j++;
}
}

这是link

Answer 2

如果目标不在ul之内，那不是兄弟姐妹，更像是叔叔之类的东西；）所以$(this).siblings不会起作用

尝试一下：

$('.showSingle').click(function(e){
    e.preventDefault();
    $('.targetDiv').slideToggle('fast')
})

根据您的标记更新的答案

由于您有多个切换触发器，并且只希望在某个触发器之后直接切换目标，因此可以使用$(this)

但是您需要链接其他一些jQuery函数，以达到可以定位下一个目标的级别。

$('this').parent().parent().next('.targetDiv')

在这种情况下，

.next()比.siblings()更好，因为它返回与.targetDiv选择器匹配的下一个同级兄弟

这是完整的代码：

 $(document).ready(function () {
    $('.showSingle').click(function(e) {
        e.preventDefault();
        $('this').parent().parent().next('.targetDiv').slideToggle('fast');
    });
 });

更新的小提琴https://jsfiddle.net/ywsmgd5c/

Answer 3

为了不重新加载，必须写页面<a href="#">。我为您制作了demo，请看@Ploni Almoni

隐藏/显示具有链接的div

3 个答案: