logo标签列表

jQuery快速悬停问题

javascriptjqueryhtmlcss
3

我有一个侧边栏存在问题。问题在于当我缓慢将鼠标移到侧边栏时，它能正常工作，但是当我快速移动鼠标时，它会出现问题。我该如何解决？

这是我的HTML：

<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>

这是我的 JavaScript 代码：

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

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

这是我的 CSS：

.sidebar {
    width: 18.75em;
    height: 200px;
    padding: 1.875em 0 1.375em 0;
    float: right;
    display: table;
}

.sidebar ul.insidenav {margin-bottom: 5px;display: inline;}
.sidebar ul.insidenav li.purple {background-color: #9b59b6;}
.sidebar ul.insidenav li.green {background-color: #6fba45;}
.sidebar ul.insidenav li.blue {background-color: #38afe2;}
.sidebar ul.insidenav li.darkorange {background-color: #e8a061;}
.sidebar ul.insidenav li.orange {background-color: #f1c40f;}
.sidebar ul.insidenav li.red {background-color: #e65947;}
.sidebar ul.insidenav li.lightgreen {background-color: #1ac98f;}
.sidebar ul.insidenav li.darkbrown {background-color: #a07e95;}
.sidebar ul.insidenav li.other1 {background-color: #3E5F8A;}
.sidebar ul.insidenav li.other2 {background-color: #3E5F8A;}
.sidebar ul.insidenav li.other3 {background-color: #3E5F8A;}
.sidebar ul.insidenav li ul.insidenavsubmenu{
    color: #fff;
    display: none;
    margin-right: 65px;
    padding-bottom: 5px;    
}
.sidebar ul.insidenav li ul.insidenavsubmenu li a{color: #fff;cursor: pointer;font: 8pt IRANSans;}
.sidebar ul.insidenav li ul.insidenavsubmenu li ul.dubinsidenavsubmenu{
    color: #fff;
    display: none;
    margin-right: 15px;
    padding-bottom: 5px;    

}
.sidebar ul.insidenav li ul.insidenavsubmenu li ul.dubinsidenavsubmenu li a{color: #fff;}
如果您能为此创建一个jsfiddle，那将更好。另外，如果可能的话，请分享CSS。 - Dhwani
尝试将你的脚本合并到一个悬停函数中。 - Bhojendra Rauniyar
你在侧边栏使用哪种CSS？Bootstrap吗？ - Dhwani
2个回答
2

这是一个正常工作的示例。

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/2.1.1/jquery.min.js"></script>
<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>

0

你应该将 slideDown 的持续时间改为 1000，这样它就会立即下降。

$(this).find('ul.dubinsidenavsubmenu').slideDown({duration:10});

你还可以从这个问题中获得帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接