Question

我有一个列表，其中包含单击链接时打开的详细信息部分。它在大多数情况下都能正常工作，但在某些边缘情况下却没有。

我在代码中包含了注释，以准确解释问题所在。

理想情况下我想用CSS解决这个问题，但我已经在使用javascript＆amp;在页面上使用jQuery，如果无法完成，那么使用它们的解决方案就可以了。

或者这里是html：

示例1 这就是它的外观。

<ul>
    <li class='open'>
        <div class='title'>
            <a class='link'>details</a>
            item 1
        </div>
        <div class='details'>
            These details open when the details link is clicked
        </div>
    </li>
    <li>
        <div class='title'>
            <a class='link'>details</a>
            item 2
        </div>            
        <div class='details'>
            this is hidden
        </div>        
    </li>
    <li>
        <div class='title'>
            <a class='link'>details</a>
            item 3            
        </div>            
        <div class='details'>
            this is hidden
        </div>        
    </li>    
</ul>

示例2 如果名称太长，则应该将整个列表的宽度推得更宽，而不是突破到下一行，背景在其下方展开。相反，它覆盖了细节链接而不是扩展背景。来自其他项目的详细信息链接也应该向右移动，以便它们保持一致。

<ul>
    <li class='open'>
        <div class='title'>
            <a class='link'>details</a>
            item 1 with a very very  very long name
        </div>
        <div class='details'>
            These details open when the details link is clicked
        </div>
    </li>
    <li>
        <div class='title'>
            <a class='link'>details</a>
            item 2
        </div>            
        <div class='details'>
            this is hidden
        </div>        
    </li>
</ul>

示例3 详细信息部分有时可能包含一个不会破坏的长网址。后台应该展开以覆盖网址，细节链接向右移动以与网址的末尾对齐。

<ul>
    <li class='open'>
        <div class='title'>
            <a class='link'>details</a>
            item 1
        </div>
        <div class='details'>
            <div class='url'>
                 all this should be on one line: www.a-long-url
            </div>

        </div>
    </li>
    <li>
        <div class='title'>
            <a class='link'>details</a>
            item 2
        </div>            
        <div class='details'>
            this is hidden
        </div>        
    </li>
</ul>

和css：

.details {
    display: none;
}

.open .details {
    display: block;
}

.link {
    text-decoration: underline;
    float: right;
}

.title {
    font-weight: bold;
    white-space:nowrap;
}

.url {
    white-space:nowrap;
}

ul {
    list-style-type: none;
    width: 15em;
}
li.open {
    background-color: #c8d8ff;
    border-radius: 2em;
}

li>div {
    padding: 1em;     
}

Answer 1

只需删除ul { width: 15em }部分，即可：http://jsfiddle.net/gzjwF/1/

Answer 2

您可以为display: inline-block元素设置li.open。当然，只有当您希望每个列表项都适合其内容时。 working example

虽然我不确定你的问题是什么意思。

使此列表正确展开

2 个答案: