javascript - 隐藏/显示带链接的 div

Question

当单击 a li 标记内的链接时，我尝试使用 jQuery 隐藏和显示 div，但是我无法获取 DOM 元素。Ousite 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

我不认为有什么问题，你只是错过了目标:/

更新:我已经更改了代码片段

$(function () {
    $('.showSingle').click(function(e) {
        e.preventDefault();
        $(this).parents("ul")
               .siblings('.targetDiv')
               .slideToggle('fast');
    });
});

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

这里是 link