html - 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>