在IE浏览器中无法运行的JQuery滑动下拉菜单（10）

时间：2013-07-09 14:22:07

标签： jquery internet-explorer drop-down-menu

我使用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 Code --------------------------------------------- --- 

<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

1 个答案:

答案 0 :(得分：2)

.click(function (event) {
//....
event.stopPropagation();

}

您错过了在所有点击事件处理程序中添加event。

Updated fiddle

相关问题
最新问题