CSS水平展开和折叠图标菜单

Question

这是一个非常简单的水平菜单，单击以下主要图标即可展开和折叠：具有三个选项的LANGUAGE图标和具有四个选项的SOCIAL图标。 单击“语言”，展开其图标，然后将“社交”移到左侧。 我想弄清楚Javascript中的“ toogle”：如果LANGUAGE图标被展开，则在单击SOCIAL图标时它们会折叠，反之亦然。

 .lang {display: none;} .social {display: none;} .lang:checked ~ .UK {left: 0.2rem;} .lang:checked ~ .ES {left: 0.23rem;} .lang:checked ~ .FR {left: 0.23rem;} .lang:checked ~ .sharing {left: 0.6rem;} .social:checked ~ .FCBK {left: 0.12rem;} .social:checked ~ .TWITTER {left: 0.24rem;} .social:checked ~ .GPLUS {left: 0.48rem;} .social:checked ~ .MAIL {left: 0.60rem;} .link_general { position: relative; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .share { background-image: url(https://www.tymetro.com.tw/tymetro-new/_images/all/share-icon.png); background-repeat:no-repeat; width: 2.5rem; height: 2.5rem; display:inline-block; position:relative; bottom: 0; right:0; background-size: contain; cursor:pointer; z-index: 10; } .lang {background-image: url(http://www.aah.co.uk/wcsstore7.00.00.542/CelesioB2BStorefrontAssetStore/images/touch-icon-60px.png);} .UK, .ES, .FR, .FCBK, .TWITTER, .GPLUS, .MAIL { display:block; text-indent:-625rem; width:2.5rem; height:2.5rem; background-repeat:no-repeat; background-size:contain; cursor: pointer; padding: 0 0.5rem 0 0; } .FCBK { background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/fb.png); } .TWITTER { background-image: url(http://www.kauffman.org/images/Kauffman_org/icon-twitter-blue.png); } .GPLUS { background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/google+.png); } .MAIL { background-image: url(http://aealvalade.edu.pt/images/fich/botoes/icon-mail.png); } .UK {background-image: url(http://www.bigcheesebadges.com/images/united_kingdom_great_british_union_jack_flag.png); background-color: #F3E4FF; border-radius: 2rem;} .ES {background-image: url(http://www.bigcheesebadges.com/images/spain_spanish_flag.png);background-color: #F3E4FF; border-radius: 2rem;} .FR {background-image: url(http://www.bigcheesebadges.com/images/france_french_flag.png);background-color: #F3E4FF; border-radius: 2rem;} .sharing, .FCBK, .TWITTER, .GPLUS, .MAIL, .ETSY { display: inline-block; } .FCBK {left: -2.75rem;} .TWITTER {left:-5.5rem;} .GPLUS {left:-8.25rem;} .MAIL {left:-11rem;} .sharing {left: -7rem;} .UK {left: -2.8rem;} .ES {left:-5.5rem;} .FR {left:-8.3rem;} 

 <div> Language: <input type="checkbox" id="lang_id" class="lang"> <label for="lang_id" class="share lang"></label> <div class="UK link_general" style="display: inline-block; padding:0;" href=""> </div> <div class="ES link_general" style="display: inline-block; padding:0;" href=""> </div> <div class="FR link_general" style="display: inline-block; padding:0;" href=""> </div> </input> <div class="sharing link_general" style="display: inline-block; padding:0;" href=""> Share on: <input type="checkbox" id="social_id" class="social"> <label for="social_id" class="share"></label> <a class="FCBK link_general" style="display: inline-block; padding:0;" href="" title="Share on Facebook"> </a> <a class="TWITTER link_general" style="display:inline-block; padding:0;" href="" title="Share on Twitter"> </a> <a class="GPLUS link_general" style="display:inline-block; padding:0;" href=""> </a> <a class="MAIL link_general" style="display:inline-block; padding:0;" href="" title="Send by mail"> </a> </input> </div></div> 

Answer 1

您只需取消选中该复选框。 您将使用：

document.getElementById('lang_id').checked = false;
document.getElementById('social_id').checked = false;

 .lang {display: none;} .social {display: none;} .lang:checked ~ .UK {left: 0.2rem;} .lang:checked ~ .ES {left: 0.23rem;} .lang:checked ~ .FR {left: 0.23rem;} .lang:checked ~ .sharing {left: 0.6rem;} .social:checked ~ .FCBK {left: 0.12rem;} .social:checked ~ .TWITTER {left: 0.24rem;} .social:checked ~ .GPLUS {left: 0.48rem;} .social:checked ~ .MAIL {left: 0.60rem;} .link_general { position: relative; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .share { background-image: url(https://www.tymetro.com.tw/tymetro-new/_images/all/share-icon.png); background-repeat:no-repeat; width: 2.5rem; height: 2.5rem; display:inline-block; position:relative; bottom: 0; right:0; background-size: contain; cursor:pointer; z-index: 10; } .lang {background-image: url(http://www.aah.co.uk/wcsstore7.00.00.542/CelesioB2BStorefrontAssetStore/images/touch-icon-60px.png);} .UK, .ES, .FR, .FCBK, .TWITTER, .GPLUS, .MAIL { display:block; text-indent:-625rem; width:2.5rem; height:2.5rem; background-repeat:no-repeat; background-size:contain; cursor: pointer; padding: 0 0.5rem 0 0; } .FCBK { background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/fb.png); } .TWITTER { background-image: url(http://www.kauffman.org/images/Kauffman_org/icon-twitter-blue.png); } .GPLUS { background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/google+.png); } .MAIL { background-image: url(http://aealvalade.edu.pt/images/fich/botoes/icon-mail.png); } .UK {background-image: url(http://www.bigcheesebadges.com/images/united_kingdom_great_british_union_jack_flag.png); background-color: #F3E4FF; border-radius: 2rem;} .ES {background-image: url(http://www.bigcheesebadges.com/images/spain_spanish_flag.png);background-color: #F3E4FF; border-radius: 2rem;} .FR {background-image: url(http://www.bigcheesebadges.com/images/france_french_flag.png);background-color: #F3E4FF; border-radius: 2rem;} .sharing, .FCBK, .TWITTER, .GPLUS, .MAIL, .ETSY { display: inline-block; } .FCBK {left: -2.75rem;} .TWITTER {left:-5.5rem;} .GPLUS {left:-8.25rem;} .MAIL {left:-11rem;} .sharing {left: -7rem;} .UK {left: -2.8rem;} .ES {left:-5.5rem;} .FR {left:-8.3rem;} 

 Language: <input type="checkbox" id="lang_id" class="lang"> <label for="lang_id" class="share lang" onclick="if(document.getElementById('lang_id').value) document.getElementById('social_id').checked = false;"></label> <div class="UK link_general" style="display: inline-block; padding:0;" href=""> </div> <div class="ES link_general" style="display: inline-block; padding:0;" href=""> </div> <div class="FR link_general" style="display: inline-block; padding:0;" href=""> </div> </input> <div class="sharing link_general" style="display: inline-block; padding:0;" href=""> Share on: <input type="checkbox" id="social_id" class="social"> <label for="social_id" class="share" onclick="if(document.getElementById('social_id').value) document.getElementById('lang_id').checked = false;"></label> <a class="FCBK link_general" style="display: inline-block; padding:0;" href="" title="Share on Facebook"> </a> <a class="TWITTER link_general" style="display:inline-block; padding:0;" href="" title="Share on Twitter"> </a> <a class="GPLUS link_general" style="display:inline-block; padding:0;" href=""> </a> <a class="MAIL link_general" style="display:inline-block; padding:0;" href="" title="Send by mail"> </a> </input> </div></div> 

Answer 2

只需将type="checkbox"更改为type="radio"并设置属性name 。

 .lang { display: none; } .social { display: none; } .lang:checked~.UK { left: 0.2rem; } .lang:checked~.ES { left: 0.23rem; } .lang:checked~.FR { left: 0.23rem; } .lang:checked~.sharing { left: 0.6rem; } .social:checked~.FCBK { left: 0.12rem; } .social:checked~.TWITTER { left: 0.24rem; } .social:checked~.GPLUS { left: 0.48rem; } .social:checked~.MAIL { left: 0.60rem; } .link_general { position: relative; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .share { background-image: url(https://www.tymetro.com.tw/tymetro-new/_images/all/share-icon.png); background-repeat: no-repeat; width: 2.5rem; height: 2.5rem; display: inline-block; position: relative; bottom: 0; right: 0; background-size: contain; cursor: pointer; z-index: 10; } .lang { background-image: url(http://www.aah.co.uk/wcsstore7.00.00.542/CelesioB2BStorefrontAssetStore/images/touch-icon-60px.png); } .UK, .ES, .FR, .FCBK, .TWITTER, .GPLUS, .MAIL { display: block; text-indent: -625rem; width: 2.5rem; height: 2.5rem; background-repeat: no-repeat; background-size: contain; cursor: pointer; padding: 0 0.5rem 0 0; } .FCBK { background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/fb.png); } .TWITTER { background-image: url(http://www.kauffman.org/images/Kauffman_org/icon-twitter-blue.png); } .GPLUS { background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/google+.png); } .MAIL { background-image: url(http://aealvalade.edu.pt/images/fich/botoes/icon-mail.png); } .UK { background-image: url(http://www.bigcheesebadges.com/images/united_kingdom_great_british_union_jack_flag.png); background-color: #F3E4FF; border-radius: 2rem; } .ES { background-image: url(http://www.bigcheesebadges.com/images/spain_spanish_flag.png); background-color: #F3E4FF; border-radius: 2rem; } .FR { background-image: url(http://www.bigcheesebadges.com/images/france_french_flag.png); background-color: #F3E4FF; border-radius: 2rem; } .sharing, .FCBK, .TWITTER, .GPLUS, .MAIL, .ETSY { display: inline-block; } .FCBK { left: -2.75rem; } .TWITTER { left: -5.5rem; } .GPLUS { left: -8.25rem; } .MAIL { left: -11rem; } .sharing { left: -7rem; } .UK { left: -2.8rem; } .ES { left: -5.5rem; } .FR { left: -8.3rem; } 

 <div> Language: <input type="radio" id="lang_id" class="lang" name="radio"> <label for="lang_id" class="share lang"></label> <div class="UK link_general" style="display: inline-block; padding:0;" href=""> </div> <div class="ES link_general" style="display: inline-block; padding:0;" href=""> </div> <div class="FR link_general" style="display: inline-block; padding:0;" href=""> </div> </input> <div class="sharing link_general" style="display: inline-block; padding:0;" href=""> Share on: <input type="radio" id="social_id" class="social" name="radio"> <label for="social_id" class="share"></label> <a class="FCBK link_general" style="display: inline-block; padding:0;" href="" title="Share on Facebook"> </a> <a class="TWITTER link_general" style="display:inline-block; padding:0;" href="" title="Share on Twitter"> </a> <a class="GPLUS link_general" style="display:inline-block; padding:0;" href=""> </a> <a class="MAIL link_general" style="display:inline-block; padding:0;" href="" title="Send by mail"> </a> </input> </div> </div>