jQuery lavaLamp，对孩子
行为不端

发布于 2024-09-11 23:38:25 字数 1978 浏览 6 评论 0原文

我一直在玩 http://nixboxdesigns.com/projects/jquery-lavalamp/ 对于我正在构建的新网站上的导航菜单，它工作得很好，而且没有什么大惊小怪，然后我开始想知道是否可以在菜单中添加一些子导航选项并开始构建它。我遇到的麻烦使 lavaLamp 插件忽略嵌套/子 ul/li。

您可以在此处查看该问题的实时示例：http://www.welasewodewick.com/redesign2 - 将鼠标悬停在“博客”li 上，然后悬停在弹出的子菜单上。

我不会发布插件的完整源代码，因为它相当冗长，但您应该能够直接在此处查看它们：

lavaLamp jQuery 插件

http://www.welasewodewick.com/redesign2/includes/jquery。 lavalamp.js

菜单标记

<nav> 
 <article> 
  <ul> 
   <li><a href="#Home" alt="#">Root</a></li> 
   <li><a href="#About" alt="#">Who?</a></li> 
   <li><a href="#Projects" alt="#">Projects</a></li> 
   <li><a href="#Resume" alt="#">Blog</a> 
     <ul class='children'> 
      <li class="page_item page-item-18"><a href="http://localhost/wordpress/?page_id=18" title="History">History</a></li> 
      <li class="page_item page-item-13"><a href="http://localhost/wordpress/?page_id=13" title="Our Company">Our Company</a></li> 
      <li class="page_item page-item-15"><a href="http://localhost/wordpress/?page_id=15" title="Our Staff">Our Staff</a></li> 
     </ul> 
</li> 
    <li><a href="#Resume" alt="#">Contact</a></li> 
   </ul> 
  </article> 
 </nav>

lavaLamp 激活

$(function() { $('nav>article>ul').lavaLamp(); });

非常感谢您对此问题的意见:)

** 目的 ** 该模型的最终落脚点是 WordPress 模板，因此菜单的嵌套结构大多需要保持不变。

非常感谢狐狸精

原文

I've been playing around with http://nixboxdesigns.com/projects/jquery-lavalamp/ for a navigation menu on a new site I'm building and it works great with minimal fuss, I then started wondering if I could add some sub navigation options to the menu and set about building that in. The trouble I'm having is making the lavaLamp plugin ignore nested/child ul/li's.

You can see a live example of the issue here: http://www.weleasewodewick.com/redesign2 - hover over the 'Blog' li then over the submenu that pops in.

I won't post the full source for the plugins as it's pretty lengthy but you should be able to view them directly here:

lavaLamp jQuery Plugin

http://www.weleasewodewick.com/redesign2/includes/jquery.lavalamp.js

Menu Markup

<nav> 
 <article> 
  <ul> 
   <li><a href="#Home" alt="#">Root</a></li> 
   <li><a href="#About" alt="#">Who?</a></li> 
   <li><a href="#Projects" alt="#">Projects</a></li> 
   <li><a href="#Resume" alt="#">Blog</a> 
     <ul class='children'> 
      <li class="page_item page-item-18"><a href="http://localhost/wordpress/?page_id=18" title="History">History</a></li> 
      <li class="page_item page-item-13"><a href="http://localhost/wordpress/?page_id=13" title="Our Company">Our Company</a></li> 
      <li class="page_item page-item-15"><a href="http://localhost/wordpress/?page_id=15" title="Our Staff">Our Staff</a></li> 
     </ul> 
</li> 
    <li><a href="#Resume" alt="#">Contact</a></li> 
   </ul> 
  </article> 
 </nav>

lavaLamp Activation

$(function() { $('nav>article>ul').lavaLamp(); });

Would really appreciate your input on this issue :)

** Purpose **
The final resting place of this mockup is a WordPress template, so the nested structure of the menu mostly needs to remain the same.

Much appreciated
Foxed

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

太阳哥哥 2024-09-18 23:38:25

呵呵，我终于成功了:)
这是演示：http://jsbin.com/uyali3< /strong>

使用

去查看代码你自己 =)

注意：下次您发布问题时，请务必提供正确的代码/HTML。我花了大约 45 分钟 来理解您的整个代码。最后我找到了解决您问题的方法 =)

代码：

    <!DOCTYPE html>
    <html>
    <head>
    <title> cssFix </title>
    <meta charset=utf-8 />
    <style type="text/css">

        body { background : #2f2f2f; }

         ul  li {
        display:inline;
        float:left;
        list-style-type:none;
        margin-right:10px;
        position:relative;
        z-index:5;
        }
         ul  li.backLava {
        -moz-border-radius :6px;
        background:none repeat scroll 0 0 #009912;
        }
         ul  li a {
        color:#B9B9B9;
        display:block;
        font: bold 14px Arial;
        padding:17px 10px 6px;
        position:relative;
        text-decoration:none;
        text-shadow:0 1px 0 #38302F;
        }
         ul  li  a:hover {
        color:#ff0;
        font-size:14px;

        }
        ul  li a:active {
        color:#FFFFFF;
        }
        .children {
        background-color:#333333;
        left:-999em;
        list-style:none outside none;
        min-width:100px;
        position:absolute;
        }

        li:hover .children {
        -moz-border-radius:6px 6px 6px 6px;
        background:none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
        left:auto;
        margin:0;
        padding:10px;
        }
    </style>
    </head>
    <body>
        <ul style="position: relative;" class="ulclass">
            <li class="selectedLava"><a alt="#" href="#Home">Root</a></li>
            <li><a alt="#" href="#About">Who?</a></li>
            <li><a alt="#" href="#Projects">Projects</a></li>
            <li>
                <a alt="#" href="#Resume">Blog</a>
                <div class="children"> 
                    <span><a href="#">History</a></span> 
                    <span><a href="#">Our Company</a></span> 
                    <span><a href="#">Our Staff</a></span> 
                </div> 
            </li>
            <li><a alt="#" href="#Resume">Contact</a></li>
        </ul>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
   <script type="text/javascript" src="http://www.weleasewodewick.com/redesign2/includes/jquery.lavalamp.js" ></script>
   <script type="text/javascript" >
        $(function() {
            $('ul').lavaLamp();
        });
    </script>
    </body>
    </html>

huh, finally I got it work :)
here's the Demo : http://jsbin.com/uyali3

It is difficult to achieve this task using <ul> as child node, so I changed it to <div>

go check out the code yourself =)

NOTE : Next time when you post a question please be sure, to provide the proper code/HTML. I took me around 45 min to understand your entire code. At last I found a fix to your problem =)

Code :

    <!DOCTYPE html>
    <html>
    <head>
    <title> cssFix </title>
    <meta charset=utf-8 />
    <style type="text/css">

        body { background : #2f2f2f; }

         ul  li {
        display:inline;
        float:left;
        list-style-type:none;
        margin-right:10px;
        position:relative;
        z-index:5;
        }
         ul  li.backLava {
        -moz-border-radius :6px;
        background:none repeat scroll 0 0 #009912;
        }
         ul  li a {
        color:#B9B9B9;
        display:block;
        font: bold 14px Arial;
        padding:17px 10px 6px;
        position:relative;
        text-decoration:none;
        text-shadow:0 1px 0 #38302F;
        }
         ul  li  a:hover {
        color:#ff0;
        font-size:14px;

        }
        ul  li a:active {
        color:#FFFFFF;
        }
        .children {
        background-color:#333333;
        left:-999em;
        list-style:none outside none;
        min-width:100px;
        position:absolute;
        }

        li:hover .children {
        -moz-border-radius:6px 6px 6px 6px;
        background:none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
        left:auto;
        margin:0;
        padding:10px;
        }
    </style>
    </head>
    <body>
        <ul style="position: relative;" class="ulclass">
            <li class="selectedLava"><a alt="#" href="#Home">Root</a></li>
            <li><a alt="#" href="#About">Who?</a></li>
            <li><a alt="#" href="#Projects">Projects</a></li>
            <li>
                <a alt="#" href="#Resume">Blog</a>
                <div class="children"> 
                    <span><a href="#">History</a></span> 
                    <span><a href="#">Our Company</a></span> 
                    <span><a href="#">Our Staff</a></span> 
                </div> 
            </li>
            <li><a alt="#" href="#Resume">Contact</a></li>
        </ul>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
   <script type="text/javascript" src="http://www.weleasewodewick.com/redesign2/includes/jquery.lavalamp.js" ></script>
   <script type="text/javascript" >
        $(function() {
            $('ul').lavaLamp();
        });
    </script>
    </body>
    </html>

回复收藏 0 原文

挽清梦 2024-09-18 23:38:25

我也有同样的问题，但我不想修改 WordPress 模板：

首先，我考虑将类“noLava”添加到每个深度 > 的

中。 1，所以我尝试用自定义类来扩展 Walker 类 - 但没有成功。

然后我开始修改lavalamp jquery插件，经过一整天的尝试，我找到了解决方案这里，所以我将其修改如下，它就像一个魅力:)

{find `var $li = jQuery('li[class!=noLava]', this);` and replace with:}

    //var $li = jQuery('li[class!=noLava]', this); //default one

    //by Paolo Bergantino, via https://stackoverflow.com/questions/965816/what-jquery-selector-excludes-items-with-a-parent-that-matches-a-given-selector/965962#965962
    jQuery.expr[':'].parents = function(a,i,m){
        return jQuery(a).parents(m[3]).length < 1;
    }; 

    var $li = jQuery('li', this).filter(':parents(.children, .sub-menu)'); //for worpress :) by lelebart

也许最好的解决方案是保留原始行为并添加这个。

编辑：[在线演示]

I had the same question too, but I didn't want to modify wordpress templates:

Firstly I thought about adding the class "noLava" to every <li> with depth > 1, so I tried to expand the Walker class with a custom one - with no success.

Then I started to modify the lavalamp jquery plugin, and after having tried all day long I found the solution here, so I modified it as below, and it works like a charm :)

{find `var $li = jQuery('li[class!=noLava]', this);` and replace with:}

    //var $li = jQuery('li[class!=noLava]', this); //default one

    //by Paolo Bergantino, via https://stackoverflow.com/questions/965816/what-jquery-selector-excludes-items-with-a-parent-that-matches-a-given-selector/965962#965962
    jQuery.expr[':'].parents = function(a,i,m){
        return jQuery(a).parents(m[3]).length < 1;
    }; 

    var $li = jQuery('li', this).filter(':parents(.children, .sub-menu)'); //for worpress :) by lelebart

Maybe the best solution is to preserve the original behavior and add this one.

Edit: [online demo]

回复收藏 0 原文