Question

我有这个HTML代码，我正在尝试使用jquery激活弹出菜单而没有任何成功。由于菜单是自动创建的，我无法修改html代码。周围的任何jquery大师可以帮助解决这个问题吗？

提前谢谢你：）

html代码：

<div class="menu horizontal menu-horizontal">
<ul class="root static">
<li class="static">
<a class="static menu-item" href="">
<span class="additional-background">
<span class="menu-item-text">HOME</span>
</span>
</a>
</li>
<li class="static dynamic-children">
<a class="static dynamic-children menu-item" href="">
<span class="additional-background">
<span class="menu-item-text">ABOUT</span>
</span>
</a>
<ul class="dynamic" style="">
<li class="dynamic">
<a class="dynamic menu-item" href="">
<span class="additional-background">
<span class="menu-item-text">WHO WE ARE</span>
</span>
</a>
</li>
<li class="dynamic">
<a class="dynamic menu-item" href="">
<span class="additional-background">
<span class="menu-item-text">OUR STRATEGY</span>
</span>
</a>
</li>
<li class="dynamic">
<a class="dynamic menu-item" href="">
<span class="additional-background">
<span class="menu-item-text">OUR CLIENTS</span>
</span>
</a>
</li>
</ul>
</li>
</div>

jquery代码：

<script type="text/javascript">

        $('body').ready(function() {


            $('li.dynamic-children').hover(function() {

                $(this).find('ul.dynamic').slideToggle(); 
            });
        });
    </script>
<script type="text/javascript">

Answer 1

您的代码运行正常，只需使用$(document).ready()：

$(document).ready(function () {
    $('li.dynamic-children').on('hover',function () {
         $(this).find('ul.dynamic').slideToggle();
    });
});

JSFiddle

Answer 2

jquery代码是正确的！我不得不稍微修改它以与SharePoint中的当前CSS兼容。最终代码（即使没有优化）是

<script type="text/javascript">

$(document).ready(function () {

         $('li.dynamic-children').find('ul.dynamic').css("display","none");

}); </script>

<script type="text/javascript">
$(document).ready(function () {
    $('li.dynamic-children').on('hover',function () {
     $(this).addClass("hover");
         $(this).find('ul.dynamic').slideToggle();
         $(this).find('ul.dynamic').css('left','-1px');
         $(this).find('ul.dynamic').css('top','43px');
    });
}); </script>

Jquery帮助html弹出菜单

2 个答案: