CSS литий с кнопкой закрытия

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

Вы не можете иметь событий JavaScript на ::before или ::after.

Но вы можете проверить й положение мыши, как это:

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

Престол расслоения плотной скрипка: http://jsfiddle.net/pf9j7ry4/

Answer 2

Сделайте это с такими событиями.

Обратите внимание, что здесь я использую jQuery, так как вижу, что вы не указали это как тег в своем вопросе.

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

Я обновил свой пример, чтобы показать эту demo.

EDIT: jQuery does not support adding events on pseudoelements (:before, :after)

Так что вам нужно сделать, это перепроектировать ваши близкие кнопки, сделать их реальными элементами.

Answer 3

Попробуйте fiddle.

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

Answer 4

ли это вы получите Desire Результата

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

}); 

Демо здесь 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>

Я надеюсь, что это помогает