Question

我正在使用此测试页：http://www.problemio.com/index_new.php，您会看到列出的类别。他们有相关的子类别。

所以我想要发生的事情是，如果一个人在“健康”上进行模仿，我想向他们提供如下列表：

- Personal Health
- Healthcare
- Diet
- Exercise

每个类别都有不同的子列表。

所以我的问题是 - 因为mouseOver看起来像这样：onmouseover="SomeJavaScriptCode"

我可能要调用JavaScript函数，对吗？如果是这样，我如何使用PHP查询中的数据填充JS？我应该在PHP期间创建JS，因为数据是动态的吗？这里最好的方法是什么？

谢谢！

Answer 1

看起来嵌套的<ul>可以解决这个问题。我认为从PHP输出整个列表是有意义的，但是在HTML中通过CSS隐藏子菜单。您可以使用单击处理程序或鼠标悬停/鼠标输出组合，但javascript事件处理程序将只显示/隐藏子菜单。也就是说，jQuery有一套很好的过渡效果可以使用。

Answer 2

常用的方法是在php中获取数据，调用json_encode以使javascript中的对象具有单独的脚本，这些脚本将处理用户交互，使数据与行为分离。在javascript中获取对象使调用显示为here，然后您可以在javascript中执行任何操作。

你可以在php

中做到这一点

print "<script>";
print "var myObject = eval('".json_encode($data)."');"
print "</script>";

然后数据在javascript中，其他脚本会按照自己的喜好显示。

Answer 3

我同意，jQuery将成为你这样的任务的最好朋友。

要在HTML中构建数据，我会使用无序列表。类似的东西：

<ul id="ph">
    <li>Personal Health
        <ul id="phsub1">
            <li>Item 1 in Personal health submenu</li>
            <li>...etc</li>
        </ul>
    </li>
    <li>Healthcare <ul>...</ul></li>
    <li>etc</li>
</ul>

与Kenaniah说的一样，你可以将它们全部加载并隐藏它们直到鼠标悬停。

$('ul#ph li').hover(function() {
    $(this).find('ul:first-child').show();
}, function() {
    $(this).find('ul:first-child').hide();
});

Answer 4

我要做的是为html文件生成输出，并使用可应用于任何类似元素的通用JavaScript。

这是一个例子（假设PHP生成了以下HTML）：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

.outer {
    position:relative;
    float:left;
    left:0px;
    top:0px;
    width:100px;
    background-color:#0F0;

    margin:10px;
}

.header {
    position:relative;
    display:block;
    left:0px;
    top:0px;
    width:100%;
}
.inner_content, .inner_content_expanded {
    position:relative;
    left:0px;
    top:0px;
    float:top;
    overflow:hidden;
}

.inner_content {
    height:0px;
}

</style>
</head>
<body>

<!-- PHP would generate these elements and their contents -->
<div class="outer" onmouseover="expand(this);" onmouseout="contract(this);">
    <h3 class="header">One</h3>
    <div class="inner_content">
        A<br>
        B<br>
        C<br>
    </div>
</div>

<div class="outer" onmouseover="expand(this);" onmouseout="contract(this);">
    <h3 class="header">Two</h3>
    <div class="inner_content">
        A<br>
        B<br>
        C<br>
    </div>
</div>




<script type="text/javascript">
function expand(element) {
    element.getElementsByTagName("div")[0].className = "inner_content_expanded";
}
function contract(element) {
    element.getElementsByTagName("div")[0].className = "inner_content";
}
</script>
</body>
</html>

我应该准备好什么数据结构和格式才能在鼠标悬停时显示

4 个答案: