帶有錨的純CSS / HTML下拉列表

Question

我希望用戶能夠單擊div的一部分，然后div將隨信息展開。 但是我不想為此使用PHP或Javascript。 我找到了這個有趣的鏈接： 純CSS折疊/展開div ，以及鏈接： http : //jsfiddle.net/eJX8z/ 。 現在，我想做同樣的事情（與JSfiddle一樣）。 但是我的問題是它似乎不起作用！

---

我的HTML：

<a href="#hidemore" class="hidemore col-xs-12" id="hidemore">More</a>
<a href="#showmore" class="showmore col-xs-12" id="showmore">Less</a>
    <div class="col-xs-2 itemtoshow">
        <img src="image.png" id="holderspecs">
    </div>
    <div class="col-xs-2 itemtoshow">
        <img src="image.png" id="holderspecs">
    </div>
    <div class="col-xs-2 itemtoshow">
        <img src="image.png" id="holderspecs">
    </div>

我的CSS：

.itemtoshow {
    display:none; 
    height:auto;
    margin:0;
    float: left;
}
.showmore {
    display: none; 
}
.hidemore:target + .showmore {
    display: inline; 
}
.hidemore:target {
    display: none; 
}
.hidemore:target > .itemtoshow{
    display:block; 
}

.hidemore,
.showmore {
    font-size: 150%;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    color: #474747;
}

---

更新：

如何使用以下HTML來實現這一目標？

<a href="#postallionshowmore" class="postallionshowmore col-xs-12" id="postallionshowmore">More</a>
<div class="col-xs-12">
    <div class="col-xs-2 postallionitemtoshow">
        <img src="http://localhost/postin'/images/defaultprofileimage.png" id="postallionholderspecs">
    </div>
    <div class="col-xs-2 postallionitemtoshow">
        <img src="http://localhost/postin'/images/defaultprofileimage.png" id="postallionholderspecs">
    </div>
    <div class="col-xs-2 postallionitemtoshow">
        <img src="http://localhost/postin'/images/defaultprofileimage.png" id="postallionholderspecs">
    </div>
</div>

我再次嘗試了〜連接器，但是沒有用。 :(

Answer 1

我認為這應該可以解決問題。 兄弟選擇器~

.hidemore:target ~ .itemtoshow{
    display:inline; 
}

Answer 2

純CSS

這是在純CSS中如何實現原始問題的預期效果：

 .itemtoshow, .showmore, .hidemore:target { display: none; } .hidemore:target + .showmore, .hidemore:target ~ .itemtoshow { display:block; } .hidemore, .showmore { font-size: 150%; font-weight: bold; padding: 5px; text-align: center; color: #474747; } 

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <a href="#hidemore" class="hidemore col-xs-12" id="hidemore">More</a> <a href="#showmore" class="showmore col-xs-12" id="showmore">Less</a> <div class="col-xs-2 itemtoshow"> <img src="https://www.gravatar.com/avatar/4ffc7818a205949f2f2d19dde52bb14b?s=32&d=identicon&r=PG&f=1" id="holderspecs"> </div> <div class="col-xs-2 itemtoshow"> <img src="https://i.stack.imgur.com/mRsBv.png?s=32&g=1" id="holderspecs"> </div> <div class="col-xs-2 itemtoshow"> <img src="https://i.stack.imgur.com/4hb0m.png?s=32&g=1" id="holderspecs"> </div> 

（另請參閱此小提琴 ）

---

的JavaScript

雖然無法通過純CSS中的問題編輯中提供的HTML來實現相同的效果，但是所需的JavaScript數量卻非常有限：

 document.getElementById('postallionshowmore').addEventListener('click', function(e) { e.target.nextElementSibling.classList.toggle('show');; }); 

 .postallionshowmore { font-size: 150%; font-weight: bold; padding: 5px; text-align: center; color: #474747; } .postallionitemtoshow { display: none; } .show .postallionitemtoshow { display: block; } 

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <a href="#postallionshowmore" class="postallionshowmore col-xs-12" id="postallionshowmore">More</a> <div class="col-xs-12"> <div class="col-xs-2 postallionitemtoshow"> <img src="https://www.gravatar.com/avatar/4ffc7818a205949f2f2d19dde52bb14b?s=32&d=identicon&r=PG&f=1"> </div> <div class="col-xs-2 postallionitemtoshow"> <img src="https://i.stack.imgur.com/mRsBv.png?s=32&g=1"> </div> <div class="col-xs-2 postallionitemtoshow"> <img src="https://i.stack.imgur.com/4hb0m.png?s=32&g=1"> </div> </div> 

（另請參閱此小提琴 ）