在下拉菜單中鏈接問題

我在導航欄中添加了一個帶有標誌的下拉菜單，所以我可以移動到其他語言的頁面。這裏給DEV網站，我做我的測試鏈接：my dev site 在下拉菜單中鏈接問題

以及你可以看到下拉列表是有，但聯繫不工作......這裏的代碼本身：

<div id="image-dropdown" style=" float: right; position: relative; top: 30px;width: 45px;"> 

<a href="http://www.uprightpose.com/"> 
<input checked="checked" type="radio" id="line1" name="line-style" value="1" /> 
<!--hyperlink to the language page--> 
<label for="line1"></label> 
</a> 

<a href="http://www.uprightpose.com/home-es-new/"> 
<input type="radio" id="line2" name="line-style" value="2" /> 
<label for="line2"></label> 
</a> 
</div>

和這裏的CSS：

<style> 

#image-dropdown { 
    /*style the "box" in its minimzed state*/ 
    width:80px; height:50px; overflow:hidden; 
    /*animate collapsing the dropdown from open to closed state (v. fast)*/ 
    -moz-transition: height 0.1s; 
    -webkit-transition: height 0.1s; 
    -ms-transition: height 0.1s; 
    -o-transition: height 0.1s; 
    transition: height 0.1s; 
} 
#image-dropdown:hover { 
    height:200px; /*overflow-y:scroll;*/ 
    /*nice and smooth expand - speed this up at your preference or remove animation altogether*/ 
    -moz-transition: height 0.5s; 
    -webkit-transition: height 0.5s; 
    -ms-transition: height 0.5s; 
    -o-transition: height 0.5s; 
    transition: height 0.5s; 
} 
#image-dropdown input { 
    /*hide the nasty default radio buttons. like, completely!*/ 
    position:absolute;top:0;left:0;opacity:0; 
} 


#image-dropdown label[for="line1"] { 
    /*style the labels to look like dropdown options, kinda*/ 
    display:none; margin:2px; height:46px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/ 
    background:url("https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg"); 
    background-size: 40px; 
    background-repeat: no-repeat; 
    border-radius: 7px; 
    width: 40px; 
    height: 30px; 
    } 
    #image-dropdown label[for="line2"] { 
    /*style the labels to look like dropdown options, kinda*/ 
    display:none; margin:2px; height:46px; opacity:0.7; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute*/ 
    background:url("https://lipis.github.io/flag-icon-css/flags/4x3/es.svg"); 
    background-size: 40px; 
    background-repeat: no-repeat; 
    border-radius: 7px; 
    width: 40px; 
    height: 30px; 
    } 
#image-dropdown:hover label{ 
    /*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/ 
    display:block; 
} 
#image-dropdown label:hover { 
    opacity:0.5; 
} 
#image-dropdown input:checked + label { 
    /*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/ 
    opacity:1 !important; display:block; 
} 

/*pfft, nothing as cool here, just the value trace*/ 
#trace {margin:0 0 20px;} 
</style>

我知道輸入是有問題的，它不與環節的工作，但是...我能做到這一點無論哪種方式...幫助別人？

來源

2017-01-17 Chen Zissu

您在鏈接中有一個radio button元素。當你點擊它時，元素被選中（因爲你的鏈接沒有文本，當你按下標誌時 - 你實際上選擇了單選按鈕 - 沒有啓動任何重定向）。添加onclick事件到input標籤，該標籤將啓動重定向：

<input... onclick='window.location="http://www.uprightpose.com/home-es-new/";' />

Here is a working example with your code and an added onclick which will reload jsfiddle onclick：

<a href="http://www.uprightpose.com/"> 
    <input checked="checked" type="radio" id="line1" name="line-style" value="1" onclick='window.location="https://jsfiddle.net/";' /> 
    <!--hyperlink to the language page--> 
    <label for="line1"></label> 
</a>

來源

2017-01-17 09:35:06

在下拉菜單中鏈接問題

回答

相關問題