CSS裏有關閉按鈕

Question

問題： 我需要關閉選項列表，其中我SOFAR就是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

你不能對::before或::after JavaScript事件。

但你可以檢查鼠標的x位置，就像這樣：

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

見JS提琴：http://jsfiddle.net/pf9j7ry4/

Answer 2

這樣做的事件是這樣的。

請注意，我在這裏使用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 3

試試這個fiddle。

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

Answer 4

做到這一點，你會得到你的願望的結果

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

}); 

Demo is Here http://jsfiddle.net/7evx02zf/5/

Answer 5

上的CSS

使用僞類:checked變體與類型的無線和複選框的input元件。

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

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

我希望這有助於