javascript - 我做了一个 Accordion 菜单，但没有子菜单的链接不起作用

Question

我制作了一个 Accordion 菜单，大多数情况下一切正常。子菜单链接有效，滑动效果很好。问题是，没有子菜单的链接不起作用。我有一个 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”同级的链接起作用，但它们不起作用。例如，“调用我们”不会转到指定页面“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

首先，如果文本代表子菜单(例如:品牌)，为什么它在 anchor 标记中？如果你想显示图像和一些文本，你可以使用 css 或 img 标签来实现。 删除 UL header 。

其次，您需要删除 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);
        }
    });
});

现场演示/ fiddle :

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