Javascript jQuery下拉列表。slideUp/Down在Chrome上运行，在Firefox上运行

首先，我现在开始学习javascript，所以我知道我的代码是垃圾

但它在Chrome上对我有效！只有当我试图在Firefox上查看它时，它被窃听了

小提琴：

$（文档）.ready（函数（）{
/*下拉式网络邮件*/
$（'.button webmail'）。单击（函数（）{
如果（$（'.toggle webmail'）。是（':visible'））{
$（'.toggle webmail'）.slideUp（200）；
}
否则{
$（'.toggle webmail'）。向下滑动（200）；
$（“.toggle client area”）.slideUp（200）；
$（“.切换所有产品”）.slideUp（200）；
美元（“.toggle countries”）。slideUp（200）；
}
});
/*下拉式客户端区域*/
$（'.button客户端区域'）。单击（函数（）{
如果（$（'.toggle客户端区域'）。是（':visible'））{
$（“.toggle client area”）.slideUp（200）；
}
否则{
$（'.toggle client area'）。向下滑动（200）；
$（'.toggle webmail'）.slideUp（200）；
$（“.切换所有产品”）.slideUp（200）；
$（“.toggle products”）.slideUp（200）；
}
});
/*下拉所有产品*/
$（'.button所有产品'）。单击（函数（）{
如果（$（'.toggle all products'）。是（':visible'））{
$（“.切换所有产品”）.slideUp（200）；
}
否则{
$（“.切换所有产品”）。向下滑动（200）；
$（'.toggle webmail'）.slideUp（200）；
$（“.toggle client area”）.slideUp（200）；
美元（“.toggle countries”）。slideUp（200）；
}
});
/*下拉列表国家*/
$（'.button countries'）。单击（函数（）{
如果（$（'.toggle countries'）。是（':visible'））{
美元（“.toggle countries”）。slideUp（200）；
}
否则{
美元（“.toggle countries”）。向下滑动（200）；
$（'.toggle webmail'）.slideUp（200）；
$（“.toggle client area”）.slideUp（200）；
$（“.切换所有产品”）.slideUp（200）；
}
});
$（'html'）。单击（函数（）{
$（'.toggle webmail、.toggle client area、.toggle all products、.toggle countries'）。slideUp（200）；
});
$（'.toggle webmail、.toggle client area、.toggle all products、.toggle countries'）。单击（函数（事件）{
event.stopPropagation（）；
});
});
.集装箱{
宽度：100%；
}
.column1、.column2、.column3、.column4{
宽度：20%；
保证金权利：5%；
浮动：左；
}
.toggle webmail、.toggle client area、.toggle all products、.toggle country{
显示：无；
}
单击下拉列表
在Chrome上工作。Firefox上的bug
网络邮件
客户区
所有产品
国家

这并不是你想要的。。。但它会帮你清理干净，送你上路，我希望：-希望这有帮助。正确地使用CSS定位确实有很大帮助

HTML jQuery 经常检查你的控制台！ 主要问题是Chrome和Firefox处理

事件的方式。stopPropagation（）

。作为提示，在调试JQuery时，首先要做的事情之一是检查控制台。在JSFIDLE中，当您单击Firefox上的按钮时，您会发现控制台输出

ReferenceError:未定义事件

event.stopPropogation（）

阻止您的单击触发

$（'html'）

的onclick处理程序。由于Firefox无法调用该方法，因此您的单击会弹出到“

$（'html'）

”的onclick处理程序，该处理程序最终会在向下滑动时关闭下拉列表

要解决此问题，需要将

事件

参数添加到单击处理程序中。例如：

$('.button-webmail').click(function(event) {

    /* handle click */

    event.stopPropagation();
}

碰巧Chrome在没有这个事件参数的情况下可以正常工作。希望这能把事情弄清楚

---

此外，正如@sheriffderek所指出的，有很多方法可以清除这些代码。你绝对应该调查他的想法

首先，您可以通过更加模块化地思考来大幅减少代码。例如，您的所有列都可以具有

.column

类，然后您可以为它们的共同点设置样式，并对特定于该列的样式使用更具体的

.column1

。同样，你可以假设你所有的“切换”按钮也共享某些东西，并减少冗余。此外，firefox非常严格，所以它不是firefox的bug，只是不像你说的那样不是优秀的代码。你也可以用逗号分隔类，而不是重复<代码>$（'.toggle countries、.other thing、.other thing'）。向下滑动（200）（这）指的是事件正在发生的事情。。。所以，菜单按钮这正是问题所在，我会注意控制台的，谢谢！

<div class="column webmail">
    <div class="menu-button">Webmail</div>
    <div class="toggle-field"><input type="text"></input></div>
</div>

<div class="column client-area">
    <div class="menu-button">Client Area</div>
    <div class="toggle-field"><input type="text"></input></div>
</div>

<div class="column all-products">
    <div class="menu-button">All Products</div>
    <div class="toggle-field"><input type="text"></input></div>
</div>

<div class="column countries">
    <div class="menu-button">Countries</div>
    <div class="toggle-field"><input type="text"></input></div>
</div>

.column {
    width:20%;
    margin-right:5%;
    float:left;
}

.menu-button {
    border: 1px solid red;
    cursor: pointer;
}

.toggle-field {
    border: 1px solid blue;
}

// hide all fields

$('.toggle-field').hide();



// webmail "when you click a menu button, find the next .toggle-field and toggle it

$('.menu-button').on("click", function() {

    $(".toggle-field").hide(),
    $(this).next(".toggle-field").slideToggle(100);

});

$('.button-webmail').click(function(event) {

    /* handle click */

    event.stopPropagation();
}