Question

我使用http://www.jqueryload.com中的固定导航。重新设计并且工作正常。

单击“navigatie”时，我尝试添加黑色叠加层。我在这里找到了几个解决方案，但是当我实现它们时，导航脚本不再起作用了。我认为这是因为这里找到的解决方案也使用'this'。但我不知道如何重写它们。如何在点击第一个li = navigatie时添加叠加层？提前致谢这是我使用的代码：

HTML

    <div id="nav" class="menu">
    <ul>
    <li>
    <a href="#">Navigatie<span> <img src="/images/plus.gif" 
    width="12px" height="12px"  alt="plus" /></span></a>
    <ul>
    <li><a href="./index.php">Home</a></li>
    <li class="keukens"><a href="keukens.php">Keukens</a></li>       
    <li class="app"><a href="apparatuur.php">Apparatuur</a></li>
    <li class="interieur"><a href="interieur.php">Interieur</a></li>
    <li class="contact"><a href="contact.php">Contact</a> 
    </ul>
    </ul>

CSS

    #nav{float:left;}
    #nav ul{list-style-type:none; color:#000;}
    .menu{ font: 100% Arial, Helvetica, sans-serif ;padding-top:100px;
    color:#000;height:30px;background-color:;}    
    .menu a:hover{background-color:;}
    .menu a {text-decoration: none;padding: 0;color:#000;outline:none;}
    .menu ul{list-style: none;margin:0;padding-left:10px;}
    .menu ul li{padding:0;float:left;}
    .menu ul li ul li{padding:0;float:none;margin: 0 0 0 0px;width:100%;}
    .menu ul li ul{position: relatieve;border: 0px solid #C3D1EC;
    box-shadow: 0px 0px #CCCCCC;margin-top: -1px; display:none;
    padding:20px 0px 0px 0px;}
    .active ul{display:block !important;}
    .active a{border: 0px solid #C3D1EC;border-bottom: 0;
    box-shadow: 0 0px 0px #CCCCCC;display: block;height: 29px;
    padding: 0 0;position:relative;z-index: 1;}
    .active a:hover{background-color:#000;color:#CCC;}
    .sub{ left:10px;position: absolute; top:180px;}

JQUERY：

    (function($){
    $.fn.fixedMenu=function(){
    return this.each(function(){
        var menu= $(this);
        menu.find('ul li > a').bind('click',function(){
        if ($(this).parent().hasClass('active')){
            $(this).parent().removeClass('active');
        }
        else{
            $(this).parent().parent().find('.active').removeClass('active');
            $(this).parent().addClass('active');
        }
        })
    });

}  
    })

    (jQuery);

可在此处找到工作版本http://www.tossdesign.nl

Answer 1

你是对的，这是$（这）错了。

请改为：

 var menu= $('#nav');

另外，请仔细检查菜单结构是否包含有效的HTML。我必须从您提供的链接中复制原始html才能使其正常工作。

我将此代码用于js

 var menu= $('#nav');
    menu.find('ul li > a').bind('click',function(){
        if ($(this).parent().hasClass('active')){
            $(this).parent().removeClass('active');
        }
        else{
            $(this).parent().parent().find('.active').removeClass('active');
            $(this).parent().addClass('active');
        }
    })

供参考，这是html：

   <ul>
     <li class="active">
 <a href="#">Navigatie<span> <img width="12px" height="12px" alt="plus" src="/images/plus.gif"></span></a>
       <ul>
           <li><a href="./index.php">Home</a></li>
           <li class="keukens"><a href="keukens.php">Keukens</a></li>       
           <li class="app"><a href="apparatuur.php">Apparatuur</a></li>
           <li class="interieur"><a href="interieur.php">Interieur</a></li>
            <li class="contact"><a href="contact.php">Contact</a> 
           </li>
        </ul>
     </li>
   </ul>

单击时如何在导航上应用叠加？

1 个答案: