Question

我们可以从父主菜单项中拆分子菜单，并将其显示在布局中的另一个位置。我的标记是由我的应用程序动态生成的，因此没有手动控制。

我的标记生成如下：

<div class="wrapper" style="margin:0 auto; width:900px;">
    <div class="nav">
        <ul class="menu">
            <li class="item"><a href="#">Item 1</a></li>
            <li class="item"> <a href="#">Item 2</a>
                <ul class="sub-menu">
                    <li class="sub-item"><a href="#">Sub Item 1</a></li>
                    <li class="sub-item"><a href="#">Sub Item 2</a></li>
                    <li class="sub-item"><a href="#">Sub Item 3</a></li>
                </ul>
            </li>
            <li class="item"><a href="#">Item 3</a></li>
        </ul>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit imperdiet convallis. Aliquam erat volutpat. Vestibulum consectetur tellus a est aliquam imperdiet. Aliquam sed dolor ut nulla porta pellentesque. Vivamus et tortor at tortor interdum pretium. Donec vel ante tellus, id iaculis elit. Duis nec eros quis nulla vestibulum sagittis. Nam a auctor ipsum. Curabitur nulla elit, volutpat eu porta a, mollis sed tellus. Integer eleifend nulla non nibh tristique euismod. </p>
    </div>
    <div class="sidebar">
        <div class="split-menu">
        </div>
    </div>
</div>

任务：

如果我点击第2项，那么第2项的<ul class="sub-menu">必须显示在<div class="split-menu">中，同样当我点击第3项时，第3项子菜单必须显示在那里？

enter image description here

我的问题：

我们可以使用php吗？
如果不是怎么做？

更新

我的目标是在禁用JavaScript的旧IE6浏览器上显示此内容，因为我的客户的目标访问者来自中国和中国仍然有很多IE6都在不知道:hover css。

最后我使用WordPress和Magento作为基本应用程序。

Answer 1

使用PHP无法完成此类DOM操作，因为PHP是服务器端脚本。这意味着您希望PHP处理的任何内容都必须发送到服务器，然后才会发回响应。

接受的解决方案有效的唯一原因是因为Wordpress PHP函数wp_list_pages（虽然我不熟悉它）将生成CSS或Javascript这是实现你想要的。因此，它实际上并不正确，因为您已声明无法使用CSS :hover方法，并且无法使用Javascript。

您可以使用CSS或Javascript来实现此类DOM操作的唯一两种方法，因此我建议您将样式表应用于已关闭Javascript的浏览器，或者具体是IE 6或更早版本。这可以使用以下代码轻松完成：

<noscript>
    <!-- Attach a stylesheet to permanently hide drop down menus, -->
    <!-- and instead show the content elsewhere -->
    <link rel="stylesheet" href="//example.net/_css/noscript.css" />
</noscript>

或者，您可以像这样使用IE条件语句：

<!--[if lte IE 6]>
    <!-- Attach this stylesheet if using IE6 or earlier -->
    <link rel="stylesheet" href="//example.net/_css/ie6.css" />
<![endif]-->

为了测试上述内容，您需要在IE6中运行您的网站，然后关闭Javascript。这样你就会知道它是否有效。

总结（如果我已正确理解了这个问题），在IE6中显示/隐藏hover / mouseover上的子菜单（没有Javascript）是不可能的。

但是，如果我没有正确理解这个问题，那么请告诉我，我将很乐意为您提供进一步帮助......

一个快速说明：您似乎正在尝试使用Wordpress实现此功能，如果已经知道我不会尝试回答这个问题，因为我不熟悉Wordpress。< / em>的

原始答案

此处不需要PHP，您只需使用CSS和Javascript / jQuery的组合。

对于您的子菜单，请在CSS：
中使用以下内容
.sub-menu {display:none;} .menu:hover .sub-menu {display:block;}

以上简单告诉浏览器在父元素悬停（mouseover）时显示sub-menu项。

<强>更新

由于您不想使用Javascript，因此无法应用split-menu功能。 PHP是服务器端语言，因此无法侦听mouseover等客户端事件。您可以执行此操作的唯一方法是使用Javascript或CSS！

至于专门为IE6构建网站.........祝你好运！

:hover方法来自CSS而非Javascript！

Answer 2

首先，兄弟不能用PHP完成。由于HTML标记是固定的，我们无法做任何事情。我们需要两种其他技术的支持，即CSS和javascript。

CSS：用于将所有菜单的子菜单重新分配到特定位置。
Javascript（jQuery）：用于处理菜单的点击事件并显示它们。

以下是我建议您使用CSS的内容。将以下代码添加到样式表中。

.sub-menu{
    position:absolute;
    left:1000px;
    top:150px;
    /* And Your Custom Styling for the Sub-Menu */
 }

在标记开头添加此jQuery代码。

$(document).ready(function(){
   // This hides all the Sub Menus, when the page loads.
   $(".sub-menu").hide();
});

$(".sub-menu").click(function(){
   // Hides the previously shown menu.
   $(".sub-menu").hide();
   // Show the Currently selected Menu's Sub menu.
   $(this).get(0).show();
});

在使用jquery代码之前，请务必添加jquery链接。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

希望这能解决你的问题兄弟.. :) :) :) :)

Answer 3

我注意到你说你试图在WordPress中实现这一点。如果是的话，

在WordPress中导航。

的header.php

wp_list_pages('depth=-1&title_li=');

这将删除下拉列表（将深度参数设置为-1）

page.php文件

wp_list_pages("title_li=&child_of=$id&show_date=modified");

这将显示当前页面的子菜单项。（将child_of参数设置为当前页面）将其放置在布局中的任何位置。

在Magento：

in：app / design / frontend / default / default / template / catalog / navigation / top.phtml 替换

<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>

有了这个：

<?php foreach ($this->getStoreCategories() as $_category): ?>
<a href="<?php echo $this->getCategoryUrl($_category); ?>"><?php echo $this->htmlEscape($_category->getName()); ?></a>
<?php endforeach ?>

仍在研究Magento的子类别（Magento的一个菜鸟位）

编辑：我认为将其循环更快而不是弄明白:-) 试试这个，Here

php函数从子主菜单项中拆分子菜单并将其显示在另一个div中

3 个答案:

原始答案