Question

我做了一个手风琴菜单，大部分都是隆重的。子菜单链接正在工作，滑动很大。问题是，没有子菜单的链接不起作用。我有一个js文件，其中包含以下代码片段：

$(document).ready(function(){   
$("#nav > li > a").on("click", function(e){ 
e.preventDefault();     
}
if(!$(this).hasClass("open")) { 
    // hide any open menus and remove all other classes                 
    // open our new menu and add the open class       
    $(this).next("ul").slideDown(350);       
    $(this).addClass("open");     
    }       
    else if($(this).hasClass("open")) {      
     $(this).removeClass("open");       
    $(this).next("ul").slideUp(350);     
    }  
     }); 
    });

正如你在顶部看到的那样，它表明如果a的父节点有另一个子节点ul，则阻止该链接打开，这适用于具有子菜单的链接。但是你会认为这仍然可以使没有'ul'兄弟的链接工作，但它们不起作用。例如，'call us'不会转到指定页面“open.htm”。我感谢任何帮助。谢谢。我的HTML：

<div id="content">

    <div>
        <ul id="nav">
            <li><a href="#"><span class="block1"><img class="navicon" src="images/maps_30_white1.png" height="30" width="30" alt="Find Us" /><span class="button_desc">Find Us</span></span></a></li>
            <li><a href="open.htm#">Call Us</a></li>
            <li><a href="open.htm#"><span class="block1"><img class="navicon" src="images/clock_white1.png" height="30" width="30" alt="Opening Hours" /><span class="button_desc">Opening Hours</span></span></a></li> 
                <li><a href="#"><span class="block1"><img class="navicon" src="images/arrow_white.png" height="30" width="30" alt="Shop" /><span class="button_desc">Departments</span></span></a>  
                    <ul>
                        <li><h4><a href="http:/www.google.com/search?q=design+cartoons+animation">Cartoons</a></h4></li>
                        <li><h4><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">Comic Strips</a></h4></li>
                        <li><h4><a href="http:/www.google.com/search?q=how+to+clip+video+footage">Video Clips</a></h4></li>
                        <li><h4><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a></h4></li>
                    </ul>
                </li>
                <li><a href="#"><span class="block1"><img class="navicon" src="images/arrow_white.png" height="30" width="30" alt="Shop" /><span class="button_desc">Brands</span></span></a>
                    <ul>
                        <li><h4><a href="http:/www.google.com/search?q=photoshop+tutorials+graphics+design">Adobe Photoshop</a></h4></li>
                        <li><h4><a href="http:/www.google.com/search?q=digital+branding+graphics+logos">Branding & Logos</a></h4></li>

                    </ul>
                </li>
            <li><a href="#"><span class="block1"><img class="navicon" src="images/arrow_white.png" height="30" width="30" alt="Shop" /><span class="button_desc">Gift Ideas</span></span></a>
                    <ul>
                        <li><h4><a href="http:/www.google.com/search?q=photoshop+tutorials+graphics+design">Adobe Photoshop</a></h4></li>
                        <li><h4><a href="http:/www.google.com/search?q=digital+branding+graphics+logos">Branding & Logos</a></h4></li>
                        <li><h4><a href="http:/www.google.com/search?q=graphics+design+marketing">Digital Marketing</a></h4></li>

                    </ul>
                </li>
        </ul>
    </div>

</div>

Answer 1

首先，如果文本代表子菜单（例如：品牌），为什么它在锚标签中？如果要显示图像和某些文本，可以使用css或img标记。删除UL标题。

其次，您需要删除e.preventDefault（）。这就是为什么您的单个链接不会进入下一页的原因。

示例HTML：

<div id="content">
    <div>
        <ul id="nav">
            <li><a href="www.google.com">Call Us</a>
            </li>
            <li><span class="block open">List Header</span>

                <ul>
                    <li>List item 1</li>
                    <li>List item ...</li>
                    <li>List item n</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS：

.block {
    text-decoration: underline;
}

你固定的JS：

$(document).ready(function () {
    $("#nav > li > .block").on("click", function (e) {
        if (!$(this).hasClass("open")) {
            // hide any open menus and remove all other classes                 
            // open our new menu and add the open class       
            $(this).next("ul").slideDown(350);
            $(this).addClass("open");
        } else if ($(this).hasClass("open")) {
            $(this).removeClass("open");
            $(this).next("ul").slideUp(350);
        }
    });
});

现场演示/小提琴：

http://jsfiddle.net/tRDzr/1/

我已经制作了手风琴菜单，但没有子菜单的链接不起作用

1 个答案: