CSS li与关闭按钮

Question

问题： 我需要带有关闭选项的列表，我尝试使用的代码是 here 。

对于例如：假设我点击了测试内容1的关闭按钮，它应该从列表中删除。

这可能很简单，但我在这方面工作了很长时间才找到没有运气的解决方案

<ul class="list_sbar"> 
    <li> <a href="#">Test content1</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
</ul>

根据我展示的代码，我可以将整个list块链接为单个链接，无法为关闭提供单独的功能

注意： 正如你在我的演示中看到的那样，整个块（不仅仅是文本）被认为是单链接，我需要不同的链接/标签才能关闭，这就是为什么我提到我无法为关闭提供单独的链接。

即使我已经准备好接受单独的关闭类，不需要关闭功能（JS），我只想从li a

关闭不同的行为/链接

我不想关闭列表，如果点击它，直到我点击关闭按钮 它不应该关闭

Answer 1

用这样的事件做。

请注意，我在这里使用的是jQuery，因为我发现您在问题中没有将其作为标记。

$(".list_sbar a").click(function() {
    $(this).closest("li").fadeOut(function() {
        $(this).remove();
    });   
});

我更新了您的示例以显示 demo 。

编辑：jQuery does not support adding events on pseudoelements (:before, :after)

因此，您需要做的是重新设计关闭按钮，将它们作为实际元素。

Answer 2

试试这个fiddle。

$('ul li').on('click', function() {
    $(this).remove();
})

Answer 3

您无法在::before或::after上使用javascript活动。

但你可以检查鼠标的x位置，如下所示：

$(".list_sbar li").click(function(e) {
    if ($(this).outerWidth() - 34 <= e.offsetX)
        $(this).remove();
});

参见js fiddle：http://jsfiddle.net/pf9j7ry4/

Answer 4

这样做你会得到你的欲望结果

 $(".list_sbar").on('click','li',function(){
    $(this).fadeOut();

});

演示在这里 http://jsfiddle.net/7evx02zf/5/

Answer 5

上的变种

使用伪类:checked和input元素类型为radio和checkbox。

＆＃13;

＆＃13;

ul.list_sbar {    
    overflow: hidden;
    list-style: none;
}
ul.list_sbar li{
    position:relative;
}
ul.list_sbar li > div{
    clear:both;
    border-bottom: solid 1px #ddd;
    min-height:22px;
    line-height: 22px;
    display: block;
    text-decoration: none;
    background: #fff;
    outline: 0;
    font-weight: normal;
    padding: 4px 9px;
}
ul.list_sbar li:first-child {
    border-top: solid 1px #ddd;
}
ul.list_sbar li a {
    text-decoration: none;
    z-index: 33;
    color: #666;
    margin-bottom: 0;
    display:inline-block;
    outline: 0;
    float:left;
}
ul.list_sbar li > div:hover {
    color: #111;
    background: #FFF2BE;
    -moz-box-shadow: inset 0 0 1px #333;
    -webkit-box-shadow: inset 0 0 1px #333;
    box-shadow: inset 0 0 1px #333;
}
ul.list_sbar li input{
    display: none;
}
ul.list_sbar li label:hover{
    color: #f00;
}
ul.list_sbar li label{
    position: absolute; top: 50%;
    line-height: 22px;
    font-size: 18px;
    text-align: right;
    padding-right: 8px;    
    width: 20px;
    height: 100%;
    right: 0;
    color: #999;
    font-family:  calibri, sans-serif; 
    cursor: pointer;    
    transform: translateY(-50%); 
}
ul.list_sbar li input:checked + label + div{
    display: none;
}

＆＃13;

<ul class="list_sbar"> 
    <li> 
        <input type="radio" id="r1" name="r1" /><label for="r1">x</label>
        <div><a href="#">Test content1</a></div>
    </li>
    <li> 
        <input type="radio" id="r2" name="r2" /><label for="r2">x</label>
        <div><a href="#">Test content2</a></div>
    </li>
    <li> 
        <input type="radio" id="r3" name="r3" /><label for="r3">x</label>
        <div><a href="#">Test content3</a></div>
    </li>
   <li> 
        <input type="radio" id="r4" name="r4" /><label for="r4">x</label>
        <div><a href="#">Test content4</a></div>
    </li>
    <li> 
        <input type="radio" id="r5" name="r5" /><label for="r5">x</label>
        <div><a href="#">Test content4</a></div>
    </li>
    <li> 
        <input type="radio" id="r6" name="r6" /><label for="r6">x</label>
        <div><a href="#">Test content5</a></div>
    </li>
     <li> 
        <input type="radio" id="r7" name="r7" /><label for="r7">x</label>
        <div><a href="#">Test content6</a></div>
    </li>    
</ul>

＆＃13;

＆＃13;

＆＃13;

我希望这会有所帮助