求助大神，问题是点击某个按钮后，只改变该按钮所在容器内某个元素的显示与隐藏，页面是有多个相同容器的，单个控制

Question

当前状态为suo的时候，点击则coverdiv显示，同时class=suo变成class=kaisuo，再点击kaisuo，coverdiv隐藏，并且变为suo。然后这个页面有多个，需要互相不影响，只针对当前的li
<li>
<div class="coverdiv" style="display:block;"><p>离线</p></div>
<span class="suobox">
<a href="" class="suo"></a>
</span>
</div>
</li>
<li>
<div class="coverdiv" style="display:none;"><p>离线</p></div>
<span class="suobox">
<a href="" class="kaisuo"></a>
</span>
</div>
</li>

Answer 1

<label><input type="radio" onclick="switchItems('现填')" name="radio" title="是" value="1" checked/></label>
<label><input type="radio" onclick="switchItems('默认')" name="radio" title="否" value="2" /></label>     function switchItems(tag){
        var s = document.getElementById('s');
        if(tag=='现填'){
        s.style.display = '';
        }else{
        s.style.display = 'none';
        }
    }

Answer 2

 <ul class="four_editor" id="s" style="margin-top: 10px;" >
                                <li class="inputWrap" style="float:left;">
                                    <label class="layui-form-label">开票单位</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="invoice_title"required placeholder="请输入开票单位" autocomplete="off" class="layui-input" value="{$info.invoice_title}">
                                    </div>
                                </li>
<ul>

Answer 3

$(function(){
$(".suo,.kaisuo").click(function(event){
$(this).closest("li").find(".coverdiv").toggle();
$(this).toggleClass("suo kaisuo");
});
});

Answer 4

谢大神，但是默认状态怎么显示？判断是suo的状态就默认显示遮盖层

Answer 5

谢大神，但是默认状态怎么显示？判断是suo的状态就默认显示遮盖层
$(function(){
$(".suo").closest("li").find(".coverdiv").show();
$(".suo,.kaisuo").click(function(event){
$(this).closest("li").find(".coverdiv").toggle();
$(this).toggleClass("suo kaisuo");
});
});