jQuery滑动下拉菜单在IE(10)中不起作用

格林先生

我使用Jquery设计了一个.click下拉菜单,它在Chrome浏览器中效果很好,但在Internet Explorer(计算机上的版本10)中却没有任何作用。所以我不知道为什么下拉菜单没有激活。我希望这只是我的新手错误,而不是我正在使用的代码中更深层的嵌入式问题。任何帮助是最感激的!

http://jsfiddle.net/nZfSd/

CSS样式------------------------------------------

/*Drop-down Menu Styling*/
.make {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 20px;
    width: 110px;
    height: 25px;
    background-color: #FFF;
    color: #000;
    text-align: center;
    cursor: pointer;
    }
.makewrap {
    list-style-type: none;
    width: 150px;
    padding: 0;
    float: left;
    margin-right: 5px;
    }
.makeactive {
}

.model {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 18px;
    width: 110px;
    height: 25px;
    background-color: #2e2e2e;
    Color: #FFF;
    opacity: .8;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    margin-right: 2px;
    margin-left: 2px;
    }
.modelwrap {
    list-style-type: none;
    width: 114px;
    padding: 0;
    float: left;
    background-color: #FFF;
    margin-left: 20px;
    }
.modelactive {
}

.product {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-top: 2px;
    margin-right: 2px;
    margin-left: 2px;
    width: 150px;
    opacity: 1;
    background-color: #E6E6E6;
    color: #000;
    Text-align: center;
    cursor: pointer;
}
.productwrap {
    list-style-type: none;
    width: 154px;
    padding: 0;
    float: left;
    background-color: #FFF;
    margin-left:-20px;
}
.productactive {
}
/*drop-down menu styling end*/

HTML代码------------------------------------------------

<div class="dropdownmenus">
<!--CLUB CAR Drop-down Begins Here-->
<ul class="makewrap">
<div class="make">CLUB CAR</div>

    <!--DS BEGINS HERE-->   
    <ul class="modelwrap" style="display: none">
    <div class="model">DS</div>

    <ul class="productwrap" style="display: none">
        <div class="product">Billet Accessories</div>
        <div class="product">Bodies</div>
        <div class="product">Brush Guards & Bumpers</div>
        <div class="product">Cargo & Storage</div>
        <div class="product">Chargers & Accessories</div>
        <div class="product">Covers & Enclosures</div>
        <div class="product">Diamond Plate</div>
        <div class="product">Hitches</div>
        <div class="product">Lift Kits</div>
        <div class="product">Lights & Accessories</div>
        <div class="product">Brakes & Performance</div>
        <div class="product">Replacement Parts</div>
        <div class="product">Seat Belts</div>
        <div class="product">Seat Kits & Cushions</div>
        <div class="product">Stainless Steel</div>
        <div class="product">Steering Wheels</div>
        <div class="product">Tires</div>
        <div class="product">Wheels</div>
        <div class="product">Windshields</div>
    </ul>

    </ul><!--DS ENDS HERE-->

    <!--PRECEDENT BEGINS HERE-->
    <ul class="modelwrap" style="display: none">
    <div class="model">PRECEDENT</div>

    <ul class="productwrap" style="display: none">
        <div class="product">Billet Accessories</div>
        <div class="product">Bodies</div>
        <div class="product">Brush Guards & Bumpers</div>
        <div class="product">Cargo & Storage</div>
        <div class="product">Chargers & Accessories</div>
        <div class="product">Covers & Enclosures</div>
        <div class="product">Diamond Plate</div>
        <div class="product">Hitches</div>
        <div class="product">Lift Kits</div>
        <div class="product">Lights & Accessories</div>
        <div class="product">Brakes & Performance</div>
        <div class="product">Replacement Parts</div>
        <div class="product">Seat Belts</div>
        <div class="product">Seat Kits & Cushions</div>
        <div class="product">Stainless Steel</div>
        <div class="product">Steering Wheels</div>
        <div class="product">Tires</div>
        <div class="product">Wheels</div>
        <div class="product">Windshields</div>
    </ul>

    </ul><!--PRECEDENT ENDS HERE-->

</ul>
<!--CLUB-CAR ENDS HERE-->

<!--E-Z-GO Drop Down Begins Here-->
<ul class="makewrap">
<div class="make">E-Z-GO</div>

    <!--TXT BEGINS HERE-->
    <ul class="modelwrap" style="display: none">
    <div class="model">TXT</div>

    <ul class="productwrap" style="display: none">
        <div class="product">Billet Accessories</div>
        <div class="product">Bodies</div>
        <div class="product">Brush Guards & Bumpers</div>
        <div class="product">Cargo & Storage</div>
        <div class="product">Chargers & Accessories</div>
        <div class="product">Covers & Enclosures</div>
        <div class="product">Diamond Plate</div>
        <div class="product">Hitches</div>
        <div class="product">Lift Kits</div>
        <div class="product">Lights & Accessories</div>
        <div class="product">Brakes & Performance</div>
        <div class="product">Replacement Parts</div>
        <div class="product">Seat Belts</div>
        <div class="product">Seat Kits & Cushions</div>
        <div class="product">Stainless Steel</div>
        <div class="product">Steering Wheels</div>
        <div class="product">Tires</div>
        <div class="product">Wheels</div>
        <div class="product">Windshields</div>
    </ul>

    </ul><!--TXT ENDS HERE-->

    <!--RXV BEGINS HERE-->
    <ul class="modelwrap" style="display: none">
    <div class="model">RXV</div>

    <ul class="productwrap" style="display: none">
        <div class="product">Billet Accessories</div>
        <div class="product">Bodies</div>
        <div class="product">Brush Guards & Bumpers</div>
        <div class="product">Cargo & Storage</div>
        <div class="product">Chargers & Accessories</div>
        <div class="product">Covers & Enclosures</div>
        <div class="product">Diamond Plate</div>
        <div class="product">Hitches</div>
        <div class="product">Lift Kits</div>
        <div class="product">Lights & Accessories</div>
        <div class="product">Brakes & Performance</div>
        <div class="product">Replacement Parts</div>
        <div class="product">Seat Belts</div>
        <div class="product">Seat Kits & Cushions</div>
        <div class="product">Stainless Steel</div>
        <div class="product">Steering Wheels</div>
        <div class="product">Tires</div>
        <div class="product">Wheels</div>
        <div class="product">Windshields</div>
    </ul>

    </ul><!--RXV ENDS HERE-->

    <!-- MARATHON BEGINS HERE-->
    <ul class="modelwrap" style="display:none">
        <div class="model">MARATHON</div>

        <ul class="productwrap" style="display: none">
            <div class="product">Diamond Plate</div>
            <div class="product">Lift Kits</div>
            <div class="product">Tires</div>
            <div class="product">Wheels</div>
        </ul>

    </ul><!--MARATHON ENDS HERE-->

    <!-- WORKHORSE BEGINS HERE-->
    <ul class="modelwrap" style="display:none">
        <div class="model">WORKHORSE</div>

        <ul class="productwrap" style="display: none">
            <div class="product">Diamond Plate</div>
            <div class="product">Stainless Steel</div>
            <div class="product">Tires</div>
            <div class="product">Wheels</div>
        </ul>

    </ul><!-- WORKHORSE ENDS HERE-->

</ul>
<!--E-Z-GO ENDS HERE-->

<!--YAMAHA Drop-down Begins Here-->
<ul class="makewrap">
<div class="make">YAMAHA</div>

    <!--G1 BEGINS HERE-->
    <ul class="modelwrap" style="display:none">
    <div class="model">G1</div>

    <ul class="productwrap" style="display:none">
        <div class="product">Lift Kits</div>
        <div class="product">Tires</div>
        <div class="product">Wheels</div>
    </ul>

    </ul><!--G1 ENDS HERE-->

    <!--G2/G9 BEGINS HERE-->
    <ul class="modelwrap" style="display:none">
    <div class="model">G2/9</div>

    <ul class="productwrap" style="display:none">
        <div class="product">Lift Kits</div>
        <div class="product">Tires</div>
        <div class="product">Wheels</div>
    </ul>

    </ul><!--G2/G9 ENDS HERE-->

    <!--G14/16/19 BEGINS HERE-->
    <ul class="modelwrap" style="display:none">
    <div class="model">G14/16/19</div>

    <ul class="productwrap" style="display:none">
        <div class="product">Body</div>
        <div class="product">Brush Guards & Bumpers</div>
        <div class="product">Cargo & Storage</div>
        <div class="product">Diamond Plate</div>
        <div class="product">Seat Kits & Accessories</div>
        <div class="product">Lift Kits</div>
        <div class="product">Tires</div>
        <div class="product">Wheels</div>
        <div class="product">Windshields</div>
    </ul>

    </ul><!--G14/16/19 ENDS HERE-->

    <!--G22 BEGINS HERE-->
    <ul class="modelwrap" style="display:none">
    <div class="model">G22</div>

    <ul class="productwrap" style="display:none">
        <div class="product">Body</div>
        <div class="product">Brush Guards & Bumpers</div>
        <div class="product">Diamond Plate</div>
        <div class="product">Seat Kits & Accessories</div>
        <div class="product">Lift Kits</div>
        <div class="product">Tires</div>
        <div class="product">Wheels</div>
        <div class="product">Windshields</div>
    </ul>

    </ul><!--G22 ENDS HERE-->

    <!--DRIVE BEGINS HERE-->
<ul class="modelwrap" style="display:none">
<div class="model">DRIVE</div>

    <ul class="productwrap" style="display:none">
        <div class="product">Brush Guards & Bumpers</div>
        <div class="product">Diamond Plate</div>
        <div class="product">Tire</div>
        <div class="product">Wheel</div>
    </ul>

     </ul><!--DRIVE ENDS HERE-->

</ul><!--YAMAHA ENDS HERE-->

</div><!--dropdownmenus div END-->

jQuery脚本----------------------------

//start of Drop down menu script
$("ul.makewrap").click(function () {
    $this=$(this)
    $makeactive=$('.makeactive')
    $modelactive=$('.modelactive')
    event.stopPropagation();
        if ($this.children('ul').is(":hidden")) {
            $makeactive.children('ul').slideUp("fast");
            $makeactive.children('div').css({"background-color": "#FFF", "color": "#000"});
            $modelactive.children('ul').slideUp("fast");
            $modelactive.children('div').css("background-color", "#2e2e2e");
            $this.children('ul').slideDown("fast");
            $this.children('div').css({"background-color": "#990000","color": "#FFF"});
            $this.addClass('makeactive');
        }
        else {
            $this.children('ul').slideUp("fast");
            $this.children('div').css({"background-color": "#FFF", "color": "#000"});
            $this.removeClass('makeactive');
        }
});

$("ul.modelwrap").click(function () {
    event.stopPropagation();
    $this=$(this)
    $modelactive=$('.modelactive')
        if ($this.children('ul').is(":hidden")) {
            $modelactive.children('ul').slideUp("fast");
            $modelactive.children('div').css("background-color", "#2e2e2e");
            $this.children('ul').slideDown("fast");
            $this.children('div').css("background-color", "#990000");
            $this.addClass("modelactive");
        }

        else {
            $this.children('ul').slideUp("fast");
            $this.children('div').css("background-color", "#2e2e2e");
            $this.removeClass("modelactive");
        }

});
$("ul.productwrap").click(function () {
event.stopPropagation();
});
//end of drop-down menu script
普拉文
.click(function (event) {
//....
event.stopPropagation();

}

您错过了添加event所有click事件处理程序的权限。

更新的小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS垂直下拉菜单在FF和IE中不起作用

来自分类Dev

CSS下拉菜单在Chrome中不起作用

来自分类Dev

下拉菜单在Webview中不起作用

来自分类Dev

jQuery Ui Datepicker月/年下拉菜单在最新的Firefox中不起作用

来自分类Dev

滑动滑块在引导下拉菜单中不起作用

来自分类Dev

html下拉菜单在firefox中不起作用,并且在IE的较早版本中所有错误

来自分类Dev

下拉菜单在Heroku上不起作用

来自分类Dev

CSS下拉菜单在悬停时不起作用

来自分类Dev

jQuery下拉菜单不起作用

来自分类Dev

下拉菜单在Fabric JS的Materialize设计中不起作用

来自分类Dev

Bootstrap 2.x下拉菜单在3.3.1中不起作用

来自分类Dev

下拉菜单在全日历单元格中不起作用

来自分类Dev

应用引导程序后,导航栏的下拉菜单在流星中不起作用

来自分类Dev

为什么下拉菜单在bootstrap5导航栏中不起作用?

来自分类Dev

Javascript下拉菜单在Dart模板中不起作用

来自分类Dev

Bootstrap下拉菜单在Liferay 6.2中不起作用

来自分类Dev

Bootstrap下拉菜单在母版页中不起作用

来自分类Dev

Bootstrap 下拉菜单在 php codeigniter 中不起作用

来自分类Dev

导航栏下拉菜单在 bootstrap4.0 中不起作用

来自分类Dev

为什么我的下拉菜单在 div 中不起作用?

来自分类Dev

Bootstrap下拉菜单在_Layout.cshtml中不起作用在MVC 4中共享

来自分类Dev

Bootstrap 导航栏下拉菜单在浏览器中不起作用,Codepen 没问题

来自分类Dev

多选下拉菜单在我的MVC项目中不起作用

来自分类Dev

CSS下拉菜单在iOS设备上不起作用

来自分类Dev

为什么我的下拉菜单在我的foreach循环中不起作用?的PHP

来自分类Dev

引导程序下拉菜单在单击时不起作用

来自分类Dev

Bootstrap 多选下拉菜单在追加时不起作用

来自分类Dev

用jQuery隐藏下拉菜单不起作用

来自分类Dev

jQuery的单击导航与多个下拉菜单不起作用

Related 相关文章

  1. 1

    CSS垂直下拉菜单在FF和IE中不起作用

  2. 2

    CSS下拉菜单在Chrome中不起作用

  3. 3

    下拉菜单在Webview中不起作用

  4. 4

    jQuery Ui Datepicker月/年下拉菜单在最新的Firefox中不起作用

  5. 5

    滑动滑块在引导下拉菜单中不起作用

  6. 6

    html下拉菜单在firefox中不起作用,并且在IE的较早版本中所有错误

  7. 7

    下拉菜单在Heroku上不起作用

  8. 8

    CSS下拉菜单在悬停时不起作用

  9. 9

    jQuery下拉菜单不起作用

  10. 10

    下拉菜单在Fabric JS的Materialize设计中不起作用

  11. 11

    Bootstrap 2.x下拉菜单在3.3.1中不起作用

  12. 12

    下拉菜单在全日历单元格中不起作用

  13. 13

    应用引导程序后,导航栏的下拉菜单在流星中不起作用

  14. 14

    为什么下拉菜单在bootstrap5导航栏中不起作用?

  15. 15

    Javascript下拉菜单在Dart模板中不起作用

  16. 16

    Bootstrap下拉菜单在Liferay 6.2中不起作用

  17. 17

    Bootstrap下拉菜单在母版页中不起作用

  18. 18

    Bootstrap 下拉菜单在 php codeigniter 中不起作用

  19. 19

    导航栏下拉菜单在 bootstrap4.0 中不起作用

  20. 20

    为什么我的下拉菜单在 div 中不起作用?

  21. 21

    Bootstrap下拉菜单在_Layout.cshtml中不起作用在MVC 4中共享

  22. 22

    Bootstrap 导航栏下拉菜单在浏览器中不起作用,Codepen 没问题

  23. 23

    多选下拉菜单在我的MVC项目中不起作用

  24. 24

    CSS下拉菜单在iOS设备上不起作用

  25. 25

    为什么我的下拉菜单在我的foreach循环中不起作用?的PHP

  26. 26

    引导程序下拉菜单在单击时不起作用

  27. 27

    Bootstrap 多选下拉菜单在追加时不起作用

  28. 28

    用jQuery隐藏下拉菜单不起作用

  29. 29

    jQuery的单击导航与多个下拉菜单不起作用

热门标签

归档