0

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

我的标记是这样生成的：

<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 项子菜单必须显示在那里？

在此处输入图像描述

我的问题：

  1. 我们可以使用 php 做到这一点吗？
  2. 如果不是如何做到这一点？

更新：

我的目标是在禁用 JavaScript 的旧 IE6 浏览器上展示这一点，因为我的客户端的目标访问者来自中国，而在中国仍然有很多不理解:hovercss 的 IE6 漂浮在周围。

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

4

3 回答 3

2

这种 DOM 操作不能使用PHP服务器PHP端脚本来完成。这意味着您希望 PHP 处理的任何内容都必须发送到服务器，然后响应将被发回。

接受的解决方案有效的唯一原因是因为 WordpressPHP功能wp_list_pages（虽然我不熟悉它）将生成或者CSS实现Javascript您想要的。因此，它实际上是不正确的，因为您说您不能使用该CSS :hover方法，并且您不能使用Javascript.

实现这种 DOM 操作的唯一两种方法是使用CSS或Javascript，因此我建议您将样式表应用于已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 中显示/隐藏悬停/鼠标悬停的子菜单（不带Javascript）是不可能的。

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

一个快速说明：您似乎正在尝试使用 Wordpress 来实现这一点，如果知道这一点，我不会尝试回答这个问题，因为我不熟悉 Wordpress。

原始答案

这里不需要PHP，你只需要使用CSSand Javascript/的组合jQuery。

对于您的子菜单，请使用以下内容CSS：

.sub-menu {display:none;}
.menu:hover .sub-menu {display:block;}

以上只是告诉浏览器sub-menu在父元素悬停（鼠标悬停）时显示该项目。

更新

由于您不想使用Javascript，因此split-menu无法应用该功能。PHP是一种服务器端语言，因此无法监听客户端事件，例如mouseover. 您可以这样做的唯一方法是使用Javascriptor CSS！

至于专门为IE6建一个网站…………祝你好运！

:hover方法是CSS从不Javascript！

于 2013-01-14T12:08:31.827 回答
1

首先兄弟这不能用 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>

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

于 2013-01-14T12:27:41.390 回答
1

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

在 WordPress 中导航。

头文件.php

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

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

页面.php

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

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

在 Magento 中：

在：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 中的菜鸟）

编辑：我认为循环起来而不是弄清楚会更快:-)试试这个，在这里

于 2013-01-14T12:49:30.330 回答