Question

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

用css

this is my jsfiddle！但它总是在那里工作!!

我使用自己的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>

Answer 1

您的代码工作正常，您需要做的就是在正文末尾加载自定义脚本，以确保在附加事件之前加载您尝试附加事件处理程序的所有元素。要检查是否将加载类型的JSFiddle javascript设置更改为＆＃34;没有换行正文＆＃34;

编辑：由于某些原因，您的指定选择器<style name="TextLabel" parent="TextAppearance.AppCompat"> <item name="android:textColorHint">@color/HintColor</item> <item name="android:textSize">15sp</item> <item name="colorAccent">@color/editTextLine</item> <item name="colorControlNormal">@color/editTextLine</item> <item name="colorControlActivated">@color/editTextActivated</item> <item name="android:textColor">@color/textColor</item> </style>无效。如果您使用CSS1.0中的一般化$('ul.insidenav > li')，我的工作正常。

如果我们查看有关CSS选择器的W3Schools文档，我们可以找到$('ul.insidenav li')选择器的注释，其中指出：

注意：未选择直接不是指定父级子级的元素。

这可能是问题的原因，因为一般ul.insidenav > li工作正常。您可以找到here

的整个CSS选择器文档

Answer 2

我会尝试在$（document）.ready中包装所有代码，只是为了确保所有文档都已加载（尽管我建议做Vladimir建议的内容，以及:)）

看看这里：

https://learn.jquery.com/using-jquery-core/document-ready/

编辑：首先，将所有就绪函数移动到一个就绪函数（$(document).ready或$(function () {...})）并将所有事件点击绑定移动到此函数中。

jQuery导航栏鼠标悬停问题

2 个答案: