weixin_33688840 2015-09-18 18:40 采纳率: 0%
浏览 7

将菜单转换为下拉菜单

I'm trying to convert a menu to a dropdown for use in the mobile-version

I found a website where it explained how to convert a menu into drop down and I succeeded in having the drop down in the page, but the problem I have is that the JavaScript doesn't work. Clicking different options doesn't change the page.

HTML:

<nav>
    <nav id="menu">
        <ul>
            <li><a href="indexoriginal.html">Home</a></li>
            <li><a href="#">Bio</a>
                <ul>
                    <li><a href="aboutme.html">Biography</a></li>
                    <li><a href="repertoire_english.html">Repertoire</a></li>
                </ul>
            </li>   
            <li><a href="#">Gallery</a>
                <ul>
                    <li><a href="media.html">Media</a></li>
                    <li><a href="photosgeneral.html">Photos</a></li>
                </ul>
            </li>    
            <li><a href="agenda_english.html">Agenda</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

        <select>                    
            <option value="/" selected="selected">Home</option> 
            <option value="aboutme.html">Biografía</option> 
            <option value="repertoire_english.html">Repertorio</option> 
            <option value="media.html">Media</option> 
            <option value="photosgeneral.html">Fotos</option> 
            <option value="agenda_english.html">Agenda</option>
            <option value="contact.html">Contact</option>
        </select>* 

    </nav>

And here is the JavaScript I put in the of the html document:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

<script>

    //DOM ready
    $(function(){
        // Create the dropdown base
        $("<select />").appendTo("nav");

        // Create default option "Go to..."
        $("<option />", {
            "selected": "selected",
            "value"   : "",
            "text"    : "Go to..."
        }).appendTo("nav select");

        // Populate dropdown with menu items
        $("nav a").each(function() {
            var el = $(this);
            $("<option />", {
            "value"   : el.attr("href"),
            "text"    : el.text()
        }).appendTo("nav select");
    });

    $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
    });
</script>

And the webpage whose code I'm referencing: https://css-tricks.com/convert-menu-to-dropdown/

  • 写回答

2条回答

      报告相同问题?

      相关推荐 更多相似问题

      悬赏问题

      • ¥15 GEO下载数据的处理报错 :函数‘Meta’标签‘"data.frame"’找不到继承方法,如何解决?
      • ¥15 DLNM模型是否可以用二分类变量作为y变量
      • ¥15 android object box 一个实体多个表怎么写
      • ¥15 temux 启用docker 服务失败
      • ¥15 Flask 使用celery发送邮件出现‘目标计算机积极拒绝‘
      • ¥60 老人用的sd卡在手机里面不知道操作了什么,导致图片和视频变成了文件,取下sd卡连接电脑就是图中的样子,后缀改为.jpg才可以,需要用系统的画图软件才能打开,文件属性还是文件,有没有批量操作的解决办法
      • ¥15 超时跳出方法代码的返回值问题
      • ¥15 汇编语言程序设计设计,ascii码求数,再求数的BCD码
      • ¥30 Mask rcnn训练自己的数据集出现问题!
      • ¥20 研究人工智能时的几个问题