リンクをクリックすると開く詳細セクションのリストがあります。ほとんどの場合は正常に機能しますが、一部の特殊なケースでは機能しません。
問題が何であるかを正確に説明するために、コードにコメントを含めました。
理想的には、これを CSS で解決したいのですが、既にページで javascript と 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詳細セクションには、壊れてはならない長い URL が含まれている場合があります。背景は URL をカバーするように拡大し、詳細リンクは右に移動して URL の末尾に揃えます。
<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;
}