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

Question

我正在开发一个下拉菜单，您可以通过以下链接查看: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 打开 Dev-Tools 时，我可以看到样式从显示“none”切换为“block”。 <div>也被“渲染”，但不可见。我的广告拦截器已停用。有谁知道问题可能是什么？谢谢

Answer 1

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

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

为什么它没有将它隐藏在 FF 和 Edge 中我不确定我是否需要做一些谷歌搜索，但我相信它与溢出在 block 元素和表元素上的工作方式有关。

在您的 .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;
}

它按预期工作。