时间戳

首页 > 解决方案 >

的下拉菜单在 Chrome 中不可见

javascript -
的下拉菜单在 Chrome 中不可见

问题描述

我正在开发一个下拉菜单，您可以查看此链接：Dropdownmenu

它在 Firefox 和 Edge 中运行良好，但子类别在 Chrome 中不可见。

这是php代码：

$country = array(
    "Vorarlberg" => array('Bludenz', 'Feldkirch', 'Dornbirn', 'Bregenz'),

    "Tirol" => array('Imst', 'Innsbruck-Stadt', 'Innsbruck-Land', 'Kitzbühel', 'Kufstein', 'Landeck', 'Reutte', 'Schwaz'),

    "Salzburg" => array('Salzburg-Stadt', 'Hallein', 'Salzburg-Umgebung', 'St. Johann im Pongau', 'Tamsweg', 'Zell am See'),    
);

foreach ($country as $key => $value) {

    echo '<div class="countryselect" data-countryselect="'.$key.'">';
    echo $key;

    echo '<div class="districtselectwrap" data-countrydistrictopen="'.$key.'">';

    foreach ($value as $district){

        echo '<div class="districtselect" data-districtselect="'.$district.'">';
        echo $district;
        echo '</div>';  
    }

    echo '</div>';  
    echo '</div>';

}

echo '<div class="countryselect glyphicon glyphicon-refresh" data-countryselect="reset" style="margin-top: -1px;"></div>';

这是javascript：

$(".countryselect").on('click', function(){

    $('.districtselectwrap').css('display', 'none');

    var country = $(this).data('countryselect');

    $('.districtselectwrap[data-countrydistrictopen="'+country+'"]').css('display', 'block', 'important');

});

这些是样式：

.countryselect {
    position: relative;
    height: 44px;
    font-size: 20px;
    color: #FFF;
    width: auto;
    font-weight: bold;
    line-height: 44px;
    padding: 0px 10px 0px 10px;
    display: inline-table;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
    background-color: #555;
}
.districtselectwrap {
    position:absolute;
    display: none;
    z-index: 50;
    top: 44px;
}
.districtselect {
    height: 44px;
    font-size: 20px;
    color: #FFF;
    font-weight: bold;
    line-height: 44px;
    padding: 0px 10px 0px 10px;
    cursor: pointer;
    background-color: #555;
    text-overflow: ellipsis;
    overflow: hidden;
}

当我从 Chrome 打开开发工具时，我可以看到样式从显示“无”切换到“阻止”。' <div>s 也被“渲染”，但不可见。我的广告拦截器已停用。有谁知道问题可能是什么？谢谢

标签： javascripthtmlcssgoogle-chrome

解决方案

打开子菜单后，将位置更改为相对.districtselectwrap会更改父元素的宽度。

我看到的是，在 Chrome 中，overflow: hidden;on.countryselect隐藏了<div>.

为什么它没有将它隐藏在 FF 和 Edge 中我不确定我是否必须做一些谷歌搜索，但我相信它与溢出如何在块元素和表格元素上工作有关。

在您的.countryselect元素上尝试删除overflow: hidden并将显示更改为inline-block：

.countryselect {
    position: relative;
    height: 44px;
    font-size: 20px;
    color: #FFF;
    width: auto;
    font-weight: bold;
    line-height: 44px;
    padding: 0px 10px 0px 10px;
    display: inline-block;
    cursor: pointer;
    text-overflow: ellipsis;
    float: left;
    background-color: #555;
}

这样它就可以按预期工作了。

推荐阅读