CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Kalagar
Kalagar

Reputation: 379

jQuery navbar mouse hover issue

there is a sidebar that i created with jquery. when i hover mouse fast on the sidebar then on "red" area the 3th item has to open a submenu but it dosen't; how can i fix it?

this is my jsfiddle with css! but it dosent work at all over there !!

i use my own css and 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>

Upvotes: 1

Views: 83

Answers (2)

Vladimir Drenovski
Vladimir Drenovski

Reputation: 300

Your code works fine, all you need to do is to load your custom script at the end of the body to ensure all elements you are trying to attach event handlers to are loaded before the events are attached. To check that change the JSFiddle javascript settings of load type to "No wrap - in body"

EDIT: Also for some reason your specifying selector $('ul.insidenav > li') is not working. if you use generalizing one from CSS1.0 $('ul.insidenav li') i works fine.

If we look at the W3Schools documentation on CSS selectors we can find a Note for the ul.insidenav > li selector that states that:

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

This may be the cause of the problem, since the general ul.insidenav li works just fine. Reference to the entire CSS selectors documentation you may find here

Upvotes: 1

st2rseeker
st2rseeker

Reputation: 483

I would try wrapping all the code in $(document).ready, just to make sure that all of the document is loaded (though I'd advise doing what Vladimir suggests, as well :) )

Take a look here:

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

Edit: first of all, move all ready functions to one ready function ( $(document).ready or $(function () {...}) ) and move all event click binds into this function.

Upvotes: 1

Related Questions