Question

我正在使用以下脚本在网站上生成水平下拉菜单。它在Firefox和Safari中运行得非常好，但在IE8中失败了（惊喜）。预期的行为是，当导航列表中悬停具有子菜单的主菜单项时，将显示相应的子菜单，并且.submenu div中的任何现有子菜单将消失。但是，在IE8中，只有一个菜单项会显示其对应的子菜单（然后只有在其左侧的链接之后，没有子菜单的链接被悬停），并且这样做会禁用CSS悬停效果链接。 Here's一个实例。

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

Answer 1

编辑 - 你可以试试这个而不是你的：

$(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变量。如果有效，请告诉我。

我不会删除我的旧答案，也许这对其他人有用。

OLD ANSWER：

如果您愿意稍微更改CSS和HTML，那么this solution可能会对您有所帮助。

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();
            }
        }
    );
});

Answer 2

更改脚本标记：

<script>

到

<script type="text/javascript">

Jquery Dropdown无法在IE8中运行

2 个答案: