个人中心
gpt4 book ai didi

javascript - jQuery 导航栏鼠标悬停问题

转载 作者：行者123 更新时间：2023-11-30 16:02:18 25 4
gpt4 key购买 nike

有一个侧边栏是我用 jquery 创建的。当我将鼠标快速悬停在侧边栏上然后在“红色”区域上时，第 3 项必须打开子菜单，但它没有；我该如何解决？

this is my jsfiddle与CSS!但它在那里根本不起作用!!

我使用自己的 css 和 jquery 1.11.0

jQuery(window).load(function() {
  $('ul.insidenav > li').hover(function(e) {
    if ($(this).find('ul.insidenavsubmenu').length > 0) {
      $(this).find('ul.insidenavsubmenu').stop(true).slideDown('1000');
      $(this).addClass('arrow-down');
    }
  }, function() {
    if ($(this).find('ul.insidenavsubmenu').length > 0) {
      $(this).find('ul.insidenavsubmenu').stop(true).slideUp();
      $(this).removeClass('arrow-down');
    }
  });
});

jQuery(window).load(function() {
  $('ul.insidenavsubmenu > li').hover(function(e) {
    if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
      $(this).find('ul.dubinsidenavsubmenu').stop(true).slideDown('1000');
      $(this).addClass('arrow-down');
    }
  }, function() {
    if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
      $(this).find('ul.dubinsidenavsubmenu').stop(true).slideUp();
      $(this).removeClass('arrow-down');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body>


  <div class="sidebar">
    <ul class="insidenav">
      <li class="purple">
        <a href="" class="link purple"><span>ابر پژوهیار</span></a>
        <ul style="display: none;" class="insidenavsubmenu">
          <li><a href="">کتابخانه من</a>
          </li>
          <li><a target="_blank" href="">اطلاعات کاربر</a>
          </li>
          <li><a href="">مشخصات کاربر</a>
          </li>
          <li><a href="">اطلاعات حساب</a>
          </li>
          <li><a target="_blank" href="">تغیر کلمه عبور</a>
          </li>
          <li><a href="">خروج</a>
          </li>
        </ul>
      </li>
      <li class="green">
        <a href="" class="link green">
          <span>فراداده‌های موضوعی</span>
        </a>
      </li>
      <li class="blue">
        <a href="" class="link blue">
          <span>استناددهی آنلاین</span>
        </a>
      </li>
      <li class="darkorange">
        <a class="link darkorange"><span>دانشنامه استناددهی</span></a>
        <ul style="display: none;" class="insidenavsubmenu">
          <li><a href="">همزمان‌سازی</a>
          </li>
          <li><a href="">شیوه نگارش مقاله</a>
          </li>
          <li><a href="">شیوه نگارش پایان نامه</a>
          </li>
          <li><a href="">استناددهی</a>
          </li>
          <li><a href="">بیشتر بدانیم...</a>
          </li>
          <li><a href="">مثال های استناددهی</a>
          </li>
        </ul>
      </li>
      <li class="orange">
        <a href="" class="link orange"><span>خرید آنلاین</span></a>
        <ul style="display: none;" class="insidenavsubmenu">
          <li><a target="_blank" href="">خرید و دریافت پستی</a>
          </li>
          <li><a href="">خرید و دریافت آنلاین</a>
          </li>
          <li><a target="_blank" href="">خرید «پژوهیار» از دیجی‌کالا</a>
          </li>
        </ul>
      </li>
      <li class="red">
        <a class="link red"><span>کارگاه‌های آموزشی</span></a>
        <ul style="display: none;" class="insidenavsubmenu">
          <li><a href="">کارگاه‌های آموزشی برگزار شده</a>
          </li>
          <li><a href="">شرایط کارگاه‌های آموزشی</a>
          </li>
          <li>
            <a>ثبت نام</a>
            <ul class="dubinsidenavsubmenu">
              <li><a href="">فرم ثبت نام تربیت مدرس</a>
              </li>
              <li><a href="">فرم ثبت نام کارگاه سازمانی</a>
              </li>
              <li><a href="">فرم ثبت نام کارگاه عمومی</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="lightgreen">
        <a class="link lightgreen"><span>شبکه مدرسان</span></a>
        <ul style="display: none;" class="insidenavsubmenu">
          <li><a href="">استان‌های فعال</a>
          </li>
          <li><a href="">رزومه مدرسان</a>
          </li>
          <li><a href="">شرایط جذب مدرس</a>
          </li>
        </ul>
      </li>
      <li class="darkbrown">
        <a class="link darkbrown"><span>سفارشی‌سازی</span></a>
        <ul class="insidenavsubmenu">
          <li><a href="">درج شیوه‌نامه در نرم‌افزار</a>
          </li>
          <li>
            <a href="">
                            حمایت از وبگاه‌ها
                        </a>
          </li>
          <li>
            <a href="">
                            درج کتابخانه موضوعی                                     
                        </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>

最佳答案

您的代码运行良好，您需要做的就是在正文末尾加载您的自定义脚本，以确保在附加事件之前加载您尝试附加事件处理程序的所有元素。检查是否将加载类型的 JSFiddle javascript 设置更改为“No wrap - in body”

编辑:同样出于某种原因，您指定的选择器 $('ul.insidenav > li') 不起作用。如果你使用 CSS1.0 中的泛化一个 $('ul.insidenav li') 我工作正常。

如果我们查看有关 CSS 选择器的 W3Schools 文档，我们可以找到关于 ul.insidenav > li 选择器的注释，其中指出:

Note: Elements that are not directly a child of the specified parent, are not selected.

这可能是问题的原因，因为一般的 ul.insidenav li 工作正常。引用整个 CSS 选择器文档，您可能会发现 here

关于javascript - jQuery 导航栏鼠标悬停问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37541089/

25 4 0
文章推荐： c# - 我怎样才能看到我在向量中放入了多少个数字 C#
文章推荐： c# - 我的 INTEROP 代码片段有什么问题？
文章推荐： android - 如何将控制从字符串委托(delegate)给 C 中的一系列函数
文章推荐： c - 链表问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com