Question

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

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

但我想在没有append方法的情况下这样做有几个原因。我认为toggleClass可能是我正在寻找的，但我不确定如何在这种情况下使用它。我也希望能够点击＆＃39; .minibox＆＃39;再次删除列表项，因此我假设toggleClass是我正在寻找的。

感谢任何帮助＆lt; 3

Answer 1

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

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

然后你可以在你的按钮上指出你想要切换的课程

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

然后您的点击处理程序可以从按钮读取数据并使用它来选择列表元素

$("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;
    }

});

但是从我这边你只需要整个列表隐藏并显示如下：

＆＃13;

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

＆＃13;

.ul{display:none;}

＆＃13;

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

＆＃13;

那是基本的。

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

2 个答案: