1

我制作了一个手风琴菜单，几乎所有东西都运行良好。子菜单链接正常工作，滑动很大。问题是，没有子菜单的链接不起作用。我有一个 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 则阻止该链接 a 打开，这对于具有子菜单的链接很好。但是，您会认为这仍然会使没有“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>
4

1 回答 1

2

首先，如果文本代表一个子菜单（例如：品牌），为什么它在一个锚标签中？如果要显示图像和一些文本，可以使用 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/
于 2013-09-10T22:07:44.443 回答