Question

首先，我仍然在学习，所以js对我来说是相当新的，这是我第一次尝试jquery，所以如果这看起来很基本，抱歉。

有人建议我的侧边栏菜单的解决方案会更好是js或jquery并遵循我已拼凑下面的jsfiddle的建议： http://jsfiddle.net/q4Zyv/4/

总的来说，它正在努力，但我正在努力确定下一步该做什么。第一个菜单（和子菜单）将成为一个图库，我想显示12个平铺图像。我可以把图像放到li中但是我想要做的就是将我的图像设置为php包含，因为我希望稍后使用数组或其他方法添加超过12个类别。< / p>

基于此，我可以在li中添加一个包含吗？ jquery函数及其调用高度的方式是否会阻止这种情况。有什么建议？我想尽快做到这一点，即使作为一个占位符，我还要学习更多并稍后进行调整。这是上面提到的代码：

body {
    background-color:#161616;
    padding:0px;
    margin:0px;
}
#nestedAccordion {
    width:20%;
    min-width:200px;
    float:right;
    text-align:right;
}
#nestedAccordion h2, #nestedAccordion h3, #nestedAccordion div, #nestedAccordion ul, #nestedAccordion li {
    /* reset styles for accordion */
    margin:0;
    padding:0;
    font-size:14px;
    font-weight:strong;
    list-style:circle;
    font-family:arial;
}
#nestedAccordion div {
    display:none;
    color:#121212;
    overflow:hidden;
}
#nestedAccordion h2 {
    cursor:pointer;
    color:#ffffff;
    font-size:14px;
    padding:5px;
    margin:0px;
    background-color: #2d2d2d;
    border-top: #161616 1px solid;
}
#nestedAccordion h2:hover {
    background-color:#c569f2;
}
#nestedAccordion h3 {
    cursor:pointer;
    padding:5px;
    color: #ffffff;
    background-color: #3d3d3d;
}
#nestedAccordion h3:hover {
    background-color:#c569f2;
}
#nestedAccordion h3 + div {
    background-color:#4d4d4d;
    color:#ffffff;
    padding:5px 5px 5px 5px;
}
#nestedAccordion ul {
    padding:0px;
    margin:-5px;
}
#nestedAccordion li {
    color:#ffffff;
}
#nestedAccordion li div {
    width:100%;
    min-width:200px;
    height:400px;
    padding:0px;
    margin:0px;
}
#nestedAccordion li:hover {
    background-color:#c569f2;
    cursor:pointer;
}


$(document).ready(function () {
    var parentDivs = $('#nestedAccordion div'),
        childDivs = $('#nestedAccordion h3').siblings('div');

    $('#nestedAccordion h2').click(function () {
        parentDivs.slideUp();
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
        } else {
            $(this).next().slideUp();
        }
    });
    $('#nestedAccordion h3').click(function () {
        childDivs.slideUp();
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
        } else {
            $(this).next().slideUp();
        }
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="nestedAccordion">

<h2>Portfolio</h2>

    <div>
            <h3>Branding</h3>

        <div>
            <ul>
                <li>Div/PHP goes here... calling 12 thumbnails</li>
            </ul>
        </div>
            <h3>Publications</h3>

        <div>
            <ul>
                <li>Div/PHP goes here</li>
            </ul>
        </div>
            <h3>Online</h3>

        <div>
            <ul>
                <li>Div/PHP goes here</li>
            </ul>
        </div>
            <h3>Advertisments</h3>

        <div>
            <ul>
                <li>Div/PHP goes here</li>
            </ul>
        </div>
<h3>Displays</h3>

        <div>
            <ul>
                <li>Div/PHP goes here</li>
            </ul>
        </div>

<h3>Packaging</h3>

        <div>
            <ul>
                <li>Div/PHP goes here</li>
            </ul>
        </div>
    </div>

<h2>Blog</h2>

    <div>
            <ul style="margin:0px;">
                <li>entry 1</li>
                <li>entry 2</li>
            </ul>

    </div>
<h2>About</h2>

    <div>
 <!--           <h3>Production Central</h3>

        <div>-->
            <ul style="margin:0px;">
                <li>About</li>
                <li>Resume</li>
                <li>Accolades</li>
                <li>Contact</li>
            </ul>
    </div>
</div>

Answer 1

你可以嵌入php。只需将您的.html重命名为.php，然后从<?php开始，并在?>标记内用<li>关闭，以便包含您的php脚本

Answer 2

是的，您可以包含php，但不要忘记您需要将其包装在php标签中，如下所示：

<?php

// php code goes here
echo "content";

?>

我可以将php包含在jquery手风琴菜单中吗？

2 个答案: