在 div 上单击具有相同 class 的显示列表项

Question

我需要能够单击具有特定 class 的 div 并让它显示具有相同 class 的列表项。我觉得这应该很简单，但我对 jQuery 比较陌生。我正在使用这个：

$('.minibox').on('click', function (){
    var txt = $(this).attr('name');
    $('ul').append("<li class='list'>"+txt+"</li>");
});

但出于多种原因，我想在没有附加方法的情况下执行此操作。我认为 toggleClass 可能是我正在寻找的，但我不确定如何在这种情况下使用它。我还希望能够再次单击“.minibox”以删除列表项，因此我假设我正在寻找的是 toggleClass。

感谢任何帮助<3

Answer 1

您可以为点击的元素提供一个指向您想要切换的列表元素的属性。例如，如果您的列表是这样的

<ul>
    <li class="first">something</li>
    <li class="second">something else</li>
<li>

然后你可以在你的按钮上指明class你想像这样切换

<button data-target-toggle="first">click me!</button>

然后您的点击处理程序可以从按钮读取数据并将其用于 select 列表元素

$("button").click(function(){
    var targetClass = $(this).data("target-toggle");
    var targetElement = $("." + targetClass);
    //now you can do what you want to your targetElement, ie. show() or hide()
}

Answer 2

你需要的基本东西：

var t = true;
$('.minibox').click(function (){
    var txt = $(this).attr('name');

    if(t==true)
    {
        $('ul').append("<li class='list'>"+txt+"</li>");
        t=false;
    }
    else
    {
        $('ul > .list').remove();
        t=true;
    }

});

但在我这边，您只需要像这样隐藏和显示整个列表：

var t = true;
    $('.minibox').click(function (){
     var txt = $(this).attr('name');

     if(t==true)
        {
            $('.ul').find('li').text(txt);
      $('.ul').show();
      t=false;
     }
     else
        {
           $('.ul').find('li').text("");
      $('.ul').hide();
      t=true;
     }
     
    });

.ul{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul">
<li></li>
</ul>
<a href="#" class="minibox" name="Olala man">Click</a>

这是基本的。

在 div 上单击具有相同 class 的显示列表项

On div click reveal list item with the same class

jquery

append

toggleclass