select JS菜单在服务器中的行为与我自己的桌面不同

时间:2015-12-17 23:27:40

标签: javascript mobile select-menu

几个星期前我发布了我的网页...但是当我在手机上查看我的网页时(我为移动设备制作了@mediaquerie)我可以看到JS选择菜单表现得非常奇怪(它出现了4次并且不同于在我的桌面上)...你可以在这两张图片中看到差异......

Mobile version of my web in my desktop

Mobile version of my web in the server

如果您想查看代码,请访问以下网址:www.elenacostasoprano.com/contact.html

(它发生在所有页面中)。

有谁知道代码中可能出现什么问题?

2 个答案:

答案 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中使用了那些代码...所以在我的桌面上工作得很好!