Question

我在这个菜单上需要一些子类别，但我不知道为什么不起作用。这是我的菜单。我试着这样做：

<ul id="accordion">
    <li>Main</li>
        <ul>
            <li>Link1</li>
            <li>Link2</li>
            <ul id="accordion">
                        <li>link</li>
                        <li>link</li>
            </ul>
        </ul>
</ul>

但我不明白为什么没有显示子类别。

这应该是appairs：

<?php
ob_start (); // Buffer output
?>
<html>
<head>
<title><!--TITLE--></title>
    <meta http-equiv="Content-Language" content="it" />
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
    <meta name="keywords" content="<!--KEYWORDS-->" />
    <meta name="description" content="<!--DESCRIPTION-->" />
    <link rel="stylesheet" type="text/css" href="template/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
        <div id="container">
            <div id="banner"><?php include('template/banner.php') ?></div>
            <div id="navigation_left"><?php include("template/link_left.php") ?></div>      
            <div id="navigation_right" align="left"><?php include("template/link_right.php") ?></div>                               
            <div id="content"><?php include("$page.php") ?> </div>
            <div id="footer"><?php include('template/footer.php') ?></div>
        </div>
</body>
<SCRIPT>
$("#accordion > li").click(function(){

    if(false == $(this).next().is(':visible')) {
        $('#accordion > ul').slideUp(300);
    }
    $(this).next().slideToggle(300);
});
</SCRIPT>
</html>
<?php
$pageContents = ob_get_contents (); // Get all the page's HTML into a string
ob_end_clean (); // Wipe the buffer

// Replace <!--TITLE--> with $pageTitle variable contents, and print the HTML
$pageContents = str_replace ('<!--TITLE-->', $pageTitle, $pageContents);
$pageContents = str_replace ('<!--DESCRIPTION-->', $pageDescription, $pageContents);
echo str_replace ('<!--KEYWORDS-->', $pageKey, $pageContents);

?>

accordion包含在template / style.css

中

#accordion {
    list-style: none;
    padding: 0;
}
#accordion li{
    display: block;
    background-color: #FF9927;
    font-weight: bold;
    margin: 1px;
    cursor: pointer;
    padding: 5 5 5 7px;
}
#accordion ul {
    list-style: none;
    padding: 0;
    display: none;
}
#accordion ul li{
    font-weight: normal;
    background-color: #fff;
    padding: 0 0 0 7px;
}
#accordion a {
    color: black;
    text-decoration: none;
}
#accordion a:hover {
    margin-left:5px;
    text-decoration: underline;
}

我想我应该在剧本上添加一些东西，但我不知道是什么。

Answer 1

我认为这适合你：

http://jsfiddle.net/OxyDesign/ctL47w6c/

HTML

<ul id="accordion">
    <li>Main
        <ul>
            <li>Link1</li>
            <li>Link2
                <ul>
                    <li>link</li>
                    <li>link</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JS

$(document).ready(function(){
    $("#accordion li").click(function(e){
        e.stopPropagation();
        var subList = $(this).find('> ul');
        if(subList.length) subList.slideToggle(300);
    });
});

如何使此子类别垂直菜单工作？

1 个答案: