Блог

Я использую следующий скрипт для создания горизонтального выпадающего меню на сайте. Он прекрасно работает в Firefox и Safari, но терпит неудачу в IE8 (неожиданный сюрприз). Предполагаемое поведение заключается в том, что при наведении курсора мыши на пункт главного меню с подменю в списке навигации появится соответствующее подменю, и все существующие подменю в .submenu div исчезнут. Однако в IE8 только один из пунктов меню будет отображать соответствующее подменю (и то только после наведения курсора мыши на ссылку слева от него, ссылку без подменю), и это отключает эффект наведения курсора CSS на ссылки. Вот живой пример.

Я недостаточно разбираюсь в jQuery, чтобы знать, почему у меня могут возникнуть проблемы, поэтому я обращаюсь за помощью к хорошим людям из StackOverflow. Спасибо!

(Редактировать: я также запускаю ie7.js на этой конкретной странице — я не знаю, повлияет ли это на что-нибудь или нет, но я подумал, что это стоит упомянуть)

 $(document).ready(function() {
            $('.submenu ul').hide(); //hide all submenus
                var msec = document.location.href; //get current  url
                var mshref = msec.split("/"); //trim URL to include only current section
                $('.submenu ul[class~=' mshref[3] ']').show(); //show submenu belonginging to current section

            $('.topmenu a').hover(function(){
                var msection = $(this).attr("href");
                var msechref = msection.split("/");
                if($('.submenu ul[class~=' msechref[3] ']').length){ //if there's a submenu belonging to this section
                    $('.submenu ul').hide();//hide all submenus
                    $('.submenu ul[class~=' msechref[3] ']').show(); //show the submenu for the section being hovered over
                } 
                else
                {
                $('.submenu ul').hide();//hide all submenus
                $('.submenu ul[class~=' mshref[3] ']').show();//show submenu for current section
                }

            });
        });
 

И вот HTML.

         <nav><!-- top nav -->
    <div class="topmenu">
        <ul class="section_list">
<li><a class="active" href="http://test/">Home</a></li>
<li><a href="http://test/about/">About</a></li>
<li><a href="http://test/ministries/">ministries</a></li>
<li><a href="http://test/news/">news</a></li>

<li><a href="http://test/sermons/">sermons</a></li>
<li><a href="http://test/contact/">contact</a></li>
</ul>
    </div>      
    <div class="submenu">
        <ul class="category_list about">
<li><a href="http://test/about/?c=join-us">join us</a></li>
<li><a href="http://test/about/?c=our-beliefs">our beliefs</a></li>

<li><a href="http://test/about/?c=our-staff">our staff</a></li>
<li><a href="http://test/about/?c=services">services</a></li>
</ul>
        <ul class="category_list ministries">
<li><a href="http://test/ministries/?c=adults">adults</a></li>
<li><a href="http://test/ministries/?c=children">children</a></li>
<li><a href="http://test/ministries/?c=preschool">preschool</a></li>

<li><a href="http://test/ministries/?c=youth">youth</a></li>
</ul>
    </div>
</nav><!-- end of top nav -->
 

РЕДАКТИРОВАТЬ — Можете ли вы попробовать это вместо вашего:

 $(document).ready(function() {
  var root = 'http://www.qualprnt.com/clients/fbcw/', $submenu = $('.submenu ul');
  $submenu.hide();
  var current = location.href.replace(root, '').split('/')[0];
  if(current != '') {
    $submenu.filter('.'   current).show();
  }
  $('.topmenu a').mouseenter(function(){
    var section = this.href.replace(root, '').split('/')[0];
    $submenu.hide();
    if(section != '') {
      $submenu.filter('.'   section).show();
    }
    else {
      if(current != '') {
        $submenu.filter('.'   current).show();
      }
    }
    return false;
  });
});
 

С помощью этого решения вам необходимо изменить root переменную после перемещения сайта в его исходный домен. Пожалуйста, дайте мне знать, если это работает.

Я не буду удалять свой старый ответ, возможно, он будет полезен кому-то еще.

СТАРЫЙ ОТВЕТ:

Если вы хотите немного изменить свой CSS и HTML, то это решение может быть лучше для вас.

HTML:

 <nav><!-- top nav -->
    <div class="topmenu">
        <ul class="section_list">
            <li><a class="active" href="http://test/">Home</a></li>
            <li><a href="http://test/about/">About</a>
                <ul class="category_list">
                    <li><a href="http://test/about/?c=join-us">join us</a></li>
                    <li><a href="http://test/about/?c=our-beliefs">our beliefs</a></li>
                    <li><a href="http://test/about/?c=our-staff">our staff</a></li>
                    <li><a href="http://test/about/?c=services">services</a></li>
                </ul>
            </li>
            <li><a href="http://test/ministries/">ministries</a>
                <ul class="category_list">
                    <li><a href="http://test/ministries/?c=adults">adults</a></li>
                    <li><a href="http://test/ministries/?c=children">children</a></li>
                    <li><a href="http://test/ministries/?c=preschool">preschool</a></li>
                    <li><a href="http://test/ministries/?c=youth">youth</a></li>
                </ul>
            </li>
            <li><a href="http://test/news/">news</a></li>
            <li><a href="http://test/sermons/">sermons</a></li>
            <li><a href="http://test/contact/">contact</a></li>
        </ul>
    </div>      
</nav><!-- end of top nav -->
 

Javascript:

 $(document).ready(function() {
    $('.section_list > li').hover(
        function() {
            var $this = $(this);
            if($this.has('ul')) {
                $this.find('ul').show();
            }
        },
        function() {
            var $this = $(this);
            if($this.has('ul')) {
                $this.find('ul').hide();
            }
        }
    );
});
 

измените теги вашего скрипта:

 <script>
 

Для

 <script type="text/javascript">