隐藏/显示某些UL元素？

Question

我试图在单击具有Javascript和CSS类“ hiddenLi”的项目之一时显示UL元素的一部分（基本上是显示内容：无）。它们从一开始就被隐藏了，onclick我想显示它们并使单击的项目消失。这是我到目前为止尝试过的：

function showButtons() {
  $(this).parent().siblings().find('.hiddenLi').removeClass('hiddenLi');
  //remove class from all LI
  $(this).parent().hide(); //hide the Li element
}

.hiddenLi {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="noncollapsed" id="1" style="">
<p class="tagline">
    //usernames, dates, etc
</p>

<textarea id="sourceDisplay" readonly="" class="commenttextarea" style="display: none;">Probando si comento reflota el post o queda abajo</textarea>

<ul class="flat-list buttons">
    <li>
        <a class="botonmagico" title="Responder" href="javascript:void(0)" onclick="return reply(1, 1)">➥ responder</a>
    </li>
    <li>
        <a class="savelink botonmagico" title="Guardar comentario" href="javascript:void(0)" onclick="return toggleSaveComment(1);">☆</a>
    </li>
    <li>
        <a href="javascript:void(0);" id="btnExpandir" class="botonmagico">•••</a>
    </li>

    <li class="hiddenLi">
        <form class="toggle del-button " action="#" method="get">
            <input class="active" name="executed" value="deleted" type="hidden">
            <span class="option main active">
        <a href="javascript:void(0)" class="togglebutton redtext botonmagico" title="Borrar comentario" onclick="return toggle(this, 1)">✖</a>
    </span>
            <span class="option error">
        borrar?  <a href="javascript:void(0)" class="yes" onclick="deleteComment(1)">si</a> / <a href="javascript:void(0)" class="no" onclick="return toggleback(this)">no</a>
    </span>
        </form>
    </li>
    <li class="hiddenLi">
        <a class="botonmagico" href="javascript:void(0)" onclick="return edit(1, 1)">editar</a>
    </li>
    <li class="hiddenLi">
        <a class="" href="javascript:void(0)" onclick="return distinguish(1, this)">undistinguish</a>
    </li>

    <li class="hiddenLi">
        <span class="option main active">
    <a href="javascript:void(0)" class="togglebutton report-button botonmagico" onclick="return getReportDialog(this, 'DescargasAnime', 'comment', 1)">reportar</a>
</span>
    </li>

    <li class="first hiddenLi">
        <a href="/v/DescargasAnime/1/1" class="bylink botonmagico" rel="nofollow">permalink</a>
    </li>

</ul>

</div>

<div class="entry unvoted">

<div class="noncollapsed" id="9" style="">
    <p class="tagline">
        //users, time, etc
    </p>

    <textarea id="sourceDisplay" readonly="" class="commenttextarea" style="display: none;">hola KPO sos mi eroe</textarea>

    <ul class="flat-list buttons">
        <li>
            <a class="botonmagico" title="Responder" href="javascript:void(0)" onclick="return reply(9, 1)">➥ responder</a>
        </li>
        <li>
            <a class="savelink botonmagico" title="Guardar comentario" href="javascript:void(0)" onclick="return toggleSaveComment(9);">☆</a>
        </li>
        <li>
            <a href="javascript:void(0);" id="btnExpandir" class="botonmagico">•••</a>
        </li>

        <li class="hiddenLi">
            <span class="option main active">
    <a href="/v/DescargasAnime/1/9/delete" class="togglebutton redtext botonmagico" title="Borrar comentario">✖</a>
</span>
        </li>

        <li class="hiddenLi">
            <span class="option main active">
    <a href="javascript:void(0)" class="togglebutton report-button botonmagico" onclick="return getReportDialog(this, 'DescargasAnime', 'comment', 9)">reportar</a>
</span>
        </li>

        <li class="first hiddenLi">
            <a href="/v/DescargasAnime/1/9" class="bylink botonmagico" rel="nofollow">permalink</a>
        </li>

        <li class="hiddenLi">
            <a class="botonmagico" onclick="goToParent(event, 1)" href="/v/DescargasAnime/1/1" rel="nofollow">⬆ original</a>
        </li>
    </ul>

</div>
</div>

编辑：它确实适用于J. Sadi代码，但我忘了告诉我页面内将包含很多元素，因为它用于注释部分（每个注释一个UL），因此它不适用于删除所有的“ .hiddenLi”或为按钮设置ID

我确实认为我搞砸了javascript代码。你们知道我在做什么错吗？

谢谢！

Answer 1

如果要在函数中使用$(this)，则必须使用jQuery的click-event，就像我在这里所做的那样：

$('.btnExpandir').click(function() { // clickevent with jQuery
  $(this).parent().siblings('.hiddenLi').removeClass('hiddenLi'); //remove class from all LI
  $(this).parent().hide(); //hide the 'btnExpandir'-element
});

.hiddenLi {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="noncollapsed" id="1" style="">
  <p class="tagline">
    //usernames, dates, etc
  </p>

  <textarea id="sourceDisplay" readonly="" class="commenttextarea" style="display: none;">Probando si comento reflota el post o queda abajo</textarea>

  <ul class="flat-list buttons">
    <li>
      <a class="botonmagico" title="Responder" href="javascript:void(0)" onclick="return reply(1, 1)">➥ responder</a>
    </li>
    <li>
      <a class="savelink botonmagico" title="Guardar comentario" href="javascript:void(0)" onclick="return toggleSaveComment(1);">☆</a>
    </li>
    <li>
      <a href="javascript:void(0);" class="botonmagico btnExpandir">•••</a>
    </li>

    <li class="hiddenLi">
      <form class="toggle del-button " action="#" method="get">
        <input class="active" name="executed" value="deleted" type="hidden">
        <span class="option main active">
            <a href="javascript:void(0)" class="togglebutton redtext botonmagico" title="Borrar comentario" onclick="return toggle(this, 1)">✖</a>
        </span>
        <span class="option error">
            borrar?  <a href="javascript:void(0)" class="yes" onclick="deleteComment(1)">si</a> / <a href="javascript:void(0)" class="no" onclick="return toggleback(this)">no</a>
        </span>
      </form>
    </li>
    <li class="hiddenLi">
      <a class="botonmagico" href="javascript:void(0)" onclick="return edit(1, 1)">editar</a>
    </li>
    <li class="hiddenLi">
      <a class="" href="javascript:void(0)" onclick="return distinguish(1, this)">undistinguish</a>
    </li>

    <li class="hiddenLi">
      <span class="option main active">
        <a href="javascript:void(0)" class="togglebutton report-button botonmagico" onclick="return getReportDialog(this, 'DescargasAnime', 'comment', 1)">reportar</a>
    </span>
    </li>

    <li class="first hiddenLi">
      <a href="/v/DescargasAnime/1/1" class="bylink botonmagico" rel="nofollow">permalink</a>
    </li>

  </ul>

</div>

<div class="entry unvoted">

  <div class="noncollapsed" id="9" style="">
    <p class="tagline">
      //users, time, etc
    </p>

    <textarea id="sourceDisplay" readonly="" class="commenttextarea" style="display: none;">hola KPO sos mi eroe</textarea>

    <ul class="flat-list buttons">
      <li>
        <a class="botonmagico" title="Responder" href="javascript:void(0)" onclick="return reply(9, 1)">➥ responder</a>
      </li>
      <li>
        <a class="savelink botonmagico" title="Guardar comentario" href="javascript:void(0)" onclick="return toggleSaveComment(9);">☆</a>
      </li>
      <li>
        <a href="javascript:void(0);" class="botonmagico btnExpandir">•••</a>
      </li>

      <li class="hiddenLi">
        <span class="option main active">
        <a href="/v/DescargasAnime/1/9/delete" class="togglebutton redtext botonmagico" title="Borrar comentario">✖</a>
    </span>
      </li>

      <li class="hiddenLi">
        <span class="option main active">
        <a href="javascript:void(0)" class="togglebutton report-button botonmagico" onclick="return getReportDialog(this, 'DescargasAnime', 'comment', 9)">reportar</a>
    </span>
      </li>

      <li class="first hiddenLi">
        <a href="/v/DescargasAnime/1/9" class="bylink botonmagico" rel="nofollow">permalink</a>
      </li>

      <li class="hiddenLi">
        <a class="botonmagico" onclick="goToParent(event, 1)" href="/v/DescargasAnime/1/1" rel="nofollow">⬆ original</a>
      </li>
    </ul>

  </div>
</div>