几个星期前我发布了我的网页...但是当我在手机上查看我的网页时(我为移动设备制作了@mediaquerie)我可以看到JS选择菜单表现得非常奇怪(它出现了4次并且不同于在我的桌面上)...你可以在这两张图片中看到差异......
Mobile version of my web in my desktop
Mobile version of my web in the server
如果您想查看代码,请访问以下网址:www.elenacostasoprano.com/contact.html
(它发生在所有页面中)。
有谁知道代码中可能出现什么问题?
答案 0 :(得分:0)
问题是你实际上已经四次包括select
。
事实上,如果你看一下导航菜单,你会看到
<nav>
<nav id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Bio</a>
<ul>
<li><a href="biography.html">Biography</a></li>
<li><a href="repertoire.html">Repertoire</a></li>
</ul>
</li>
<li><a href="#">Gallery</a>
<ul>
<li><a href="media.html">Media</a></li>
<li><a href="photos.html">Photos</a></li>
</ul>
</li>
<li><a href="agenda.html">Agenda</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<select><option selected="selected" value="">Go to...</option><option value="index.html">Home</option><option value="#">Bio</option><option value="biography.html">Biography</option><option value="repertoire.html">Repertoire</option><option value="#">Gallery</option><option value="media.html">Media</option><option value="photos.html">Photos</option><option value="agenda.html">Agenda</option><option value="contact.html">Contact</option><option value="https://www.facebook.com/elenacostasoprano">
</option><option value="https://twitter.com/elenacpsoprano">
</option><option value="https://www.youtube.com/channel/UCoRkjY7OEQFSs7KwmruUVPw">
</option><option value="https://plus.google.com/u/0/115736588985404106684/about/p/pub">
</option><option value="https://www.instagram.com/elenacostasoprano/">
</option><option value="contact.html">EN</option><option value="de/kontakt.html">DE</option><option value="es/contacto.html">ES</option></select></nav>
<nav>
<select onchange="window.location.href=this.value;">
<option value="index.html">Home</option>
<option value="biography.html">Biography</option>
<option value="repertoire.html">Repertoire</option>
<option value="media.html">Media</option>
<option value="photos.html">Photos</option>
<option value="agenda.html">Agenda</option>
<option selected="selected" value="contact.html">Contact</option>
<option selected="selected" value="">Go to...</option><option value="index.html">Home</option><option value="#">Bio</option><option value="biography.html">Biography</option><option value="repertoire.html">Repertoire</option><option value="#">Gallery</option><option value="media.html">Media</option><option value="photos.html">Photos</option><option value="agenda.html">Agenda</option><option value="contact.html">Contact</option><option value="https://www.facebook.com/elenacostasoprano">
</option><option value="https://twitter.com/elenacpsoprano">
</option><option value="https://www.youtube.com/channel/UCoRkjY7OEQFSs7KwmruUVPw">
</option><option value="https://plus.google.com/u/0/115736588985404106684/about/p/pub">
</option><option value="https://www.instagram.com/elenacostasoprano/">
</option><option value="contact.html">EN</option><option value="de/kontakt.html">DE</option><option value="es/contacto.html">ES</option></select>
<select><option selected="selected" value="">Go to...</option><option value="index.html">Home</option><option value="#">Bio</option><option value="biography.html">Biography</option><option value="repertoire.html">Repertoire</option><option value="#">Gallery</option><option value="media.html">Media</option><option value="photos.html">Photos</option><option value="agenda.html">Agenda</option><option value="contact.html">Contact</option><option value="https://www.facebook.com/elenacostasoprano">
</option><option value="https://twitter.com/elenacpsoprano">
</option><option value="https://www.youtube.com/channel/UCoRkjY7OEQFSs7KwmruUVPw">
</option><option value="https://plus.google.com/u/0/115736588985404106684/about/p/pub">
</option><option value="https://www.instagram.com/elenacostasoprano/">
</option><option value="contact.html">EN</option><option value="de/kontakt.html">DE</option><option value="es/contacto.html">ES</option></select></nav>
<div id="extras">
<div id="socialcontainersup">
<p>
<a title="Follow me on Facebook!" href="https://www.facebook.com/elenacostasoprano" target="_blank">
<img style="margin-right:0px; margin-left:0px;" src="images/facebookmovil.png" onmouseover="this.src='images/facebookmovilhover.png'" onmouseout="this.src='images/facebookmovil.png'" alt="Facebook" width="32" height="32"></a>
<a title="Follow me on Twitter!" href="https://twitter.com/elenacpsoprano" target="_blank">
<img style="margin-right:0px; margin-left:0px;" src="images/twittermovil.png" onmouseover="this.src='images/twittermovilhover.png'" onmouseout="this.src='images/twittermovil.png'" alt="Twitter" width="32" height="32"></a>
<a title="Subscribe to my YouTube channel!" href="https://www.youtube.com/channel/UCoRkjY7OEQFSs7KwmruUVPw" target="_blank">
<img style="margin-right:0px; margin-left:0px;" src="images/youtubemovil.png" onmouseover="this.src='images/youtubemovilhover.png'" onmouseout="this.src='images/youtubemovil.png'" alt="Youtube" width="32" height="32"></a>
<a title="Follow me on GooglePlus!" href="https://plus.google.com/u/0/115736588985404106684/about/p/pub" target="_blank">
<img style="margin-right:0px; margin-left:0px;" src="images/googleplusmovil.png" onmouseover="this.src='images/googleplusmovilhover.png'" onmouseout="this.src='images/googleplusmovil.png'" alt="GooglePlus" width="32" height="32"></a>
<a title="Follow me on Instagram!" href="https://www.instagram.com/elenacostasoprano/" target="_blank">
<img style="margin-right:0px; margin-left:0px;" src="images/instagrammovil.png" onmouseover="this.src='images/instagrammovilhover.png'" onmouseout="this.src='images/instagrammovil.png'" alt="Instagram" width="32" height="32"></a>
</p>
</div>
<div id="language">
<span class="langswitcher">
<a class="active" href="contact.html">EN</a>
|
<a href="de/kontakt.html">DE</a>
|
<a href="es/contacto.html">ES</a>
</span>
</div>
</div>
<h3>Contact</h3>
<select><option selected="selected" value="">Go to...</option><option value="index.html">Home</option><option value="#">Bio</option><option value="biography.html">Biography</option><option value="repertoire.html">Repertoire</option><option value="#">Gallery</option><option value="media.html">Media</option><option value="photos.html">Photos</option><option value="agenda.html">Agenda</option><option value="contact.html">Contact</option><option value="https://www.facebook.com/elenacostasoprano">
</option><option value="https://twitter.com/elenacpsoprano">
</option><option value="https://www.youtube.com/channel/UCoRkjY7OEQFSs7KwmruUVPw">
</option><option value="https://plus.google.com/u/0/115736588985404106684/about/p/pub">
</option><option value="https://www.instagram.com/elenacostasoprano/">
</option><option value="contact.html">EN</option><option value="de/kontakt.html">DE</option><option value="es/contacto.html">ES</option></select></nav>
其中有四个使用此媒体查询显示的选择菜单
@media only screen and (max-width: 600px){
nav ul { display: none; }
nav select { display: inline-block; }
} /*Note: This last bracket miss in the original css*/
这基本上意味着“隐藏每一个ul
并显示放置在select
元素中的每个nav
元素。”
要解决此问题,您可以摆脱每个select
但只有一个。
请注意,html和css中都有几个错误。 使用验证器可帮助您找到这些问题并进行更正。网上有很多,比如this one(对于CSS)
最佳!
答案 1 :(得分:0)
谢谢,我已经在我的网站上看到了这些代码,但我桌面上的原始代码并不是这样,我没有编写&#34;选择菜单&#34;四次!代码如下...... Select menu and css
在这里你可以看到我桌面上的代码并不是那样的,我也在css中使用了那些代码...所以在我的桌面上工作得很好!