javascript - 背景位置固定在展开/折叠列表中

Question

我有一个可用的扩展列表。我的疑问是当我展开列表时如何让我的 BG Img 固定在左上角。

查看此列表中的第一个和第二个示例，图像在展开时会下降。 http://jsfiddle.net/vitorboccio/79yL76wz/

<div id="listContainer">
                        <ul id="expList">
                            <li>Quem pode contratar a Loja Pronta ?
                                <ul>
                                    <li>Item A.1</li>
                                </ul>
                            </li>
                            <li>Lorem Ipsum dolor sit amet ?
                                <ul>
                                    <li>Item B.1</li>
                                </ul>
                            </li>
                            <li>Lorem Ipsum dolor sit amet ?
                                <ul>
                                    <li>Item C.1</li>
                                </ul>
                            </li>
                            <li>Lorem Ipsum dolor sit amet ?
                                <ul>
                                    <li>Item D.1</li>
                                </ul>
                            </li>
                            <li>Lorem Ipsum dolor sit amet ?
                                <ul>
                                    <li>Item E.1</li>
                                </ul>
                            </li>
                        </ul>
                    </div>

function prepareList() {
                    $("#expList").find("li:has(ul)")
                    .on('click', function(event){
                        if (this == event.target){
                            $(this).toggleClass("expanded");
                            $(this).children("ul").toggle("medium");
                        }
                        return false
                    })
                    .addClass(".collapsed")
                    .children("ul").hide();
                };

                $(document).ready(function(){

                    prepareList();
                });

谢谢!

Answer 1

只需将背景位置设置为 18px 和 22px

#listContainer ul#expList li {
border-top: 1px solid #d5d5d5;
/* line-height: 140%; */
line-height: 66px;
text-indent: 0px;
background-position: 1px 8px;
padding-left: 55px;
background-repeat: no-repeat;
min-height: 66px;
background: url(http://lorempixel.com/20/20) no-repeat 18px 22px;
}