Question

我正在使用GetSimple CMS，目前正试图用带有GetSimple版本的下拉菜单替换旧的静态导航栏。我似乎已经开始工作了，但我遇到了一个问题：我无法让jQuery脚本工作。

在我加入CMS之前，我有一个基本的子菜单设置：

<ul class = "navbar">
   <li><a>Item</a>
      <ul class="slidedown">
         <li><a>SubItem</a>
      </ul>
   </li>
  <!--Again-->
</ul>

我定位.slidedown并在我的CSS中为其提供了position:absolute和display:none，并运行了此脚本：

$(document).ready(function () {
    $(".navbar li").hover(
  function () {
     $($(this).find(".slidedown")).stop().fadeIn(200);
  }, 
  function () {
     $($(this).find(".slidedown")).stop().fadeOut(300);
  }
);

});

但是，在我加入CMS之后，它将标记更改为基本相同的内容，除了.slidedown ul没有类（在这种情况下，{{1} }）。所以我想我只是手动定位它，使用.slidedown代替.navbar li ul作为选择器。这在我的CSS中运行良好，但它破坏了脚本。我假设它是.slidedown部分，因为我告诉我在悬停的每个div中放入一些文字。当我从CSS中删除.find()时，菜单也正确显示（尽管一次性完成）。

这里是CMS生成的内容和我的脚本/ css的小提琴： http://jsfiddle.net/R3ndH/1/

我有什么办法可以解决它吗？

另请注意：我尝试使用旧的HTML标记，不包括CMS，只是取消display:none课程。这也没有用，所以我认为它与CMS无关，而与标记/选择器有关。

Answer 1

Here is the fiddle

$(document).ready(function () {

    $('.navbar li').hover(  
   function(){  
      $(this).find('ul').stop().fadeTo('slow', 1);  
   },  
   function(){  
      $(this).find('ul').stop().fadeOut('slow', 0);  
   });  

});

jQuery悬停下拉菜单不适用于CMS

1 个答案: