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

Answer 1

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

我看到的是在Chrome中，overflow: hidden;上的.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;
}

可以正常工作。

Answer 2

您需要将绝对值更改为相对值

.districtselectwrap {
    position: relative;
}

Answer 3

使用relative代替absolute，还添加$('.districtselectwrap').css('display', 'none');以防止默认打开子菜单。工作示例：

//add this line to prevent default opening of option
 $('.districtselectwrap').css('display', 'none');
 
  $(".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:relative; /*change this*/
    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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="countryselect" data-countryselect="Vorarlberg">Vorarlberg
    <div class="districtselectwrap" data-countrydistrictopen="Vorarlberg" style="display: none;">
      <div class="districtselect" data-districtselect="Bludenz">Bludenz</div>
      <div class="districtselect" data-districtselect="Feldkirch">Feldkirch</div>
      <div class="districtselect" data-districtselect="Dornbirn">Dornbirn</div>
      <div class="districtselect" data-districtselect="Bregenz">Bregenz</div>
    </div>
  </div>
  <div class="countryselect" data-countryselect="Tirol">Tirol
    <div class="districtselectwrap" data-countrydistrictopen="Tirol" style="display: none;">
      <div class="districtselect" data-districtselect="Imst">Imst</div>
      <div class="districtselect" data-districtselect="Innsbruck-Stadt">Innsbruck-Stadt</div>
      <div class="districtselect" data-districtselect="Innsbruck-Land">Innsbruck-Land</div>
      <div class="districtselect" data-districtselect="Kitzbühel">Kitzbühel</div>
      <div class="districtselect" data-districtselect="Kufstein">Kufstein</div>
      <div class="districtselect" data-districtselect="Landeck">Landeck</div>
      <div class="districtselect" data-districtselect="Reutte">Reutte</div>
      <div class="districtselect" data-districtselect="Schwaz">Schwaz</div>
    </div>
  </div>
  <div class="countryselect" data-countryselect="Salzburg">Salzburg
    <div class="districtselectwrap" data-countrydistrictopen="Salzburg" style="display: block;">
      <div class="districtselect" data-districtselect="Salzburg-Stadt">Salzburg-Stadt</div>
      <div class="districtselect" data-districtselect="Hallein">Hallein</div>
      <div class="districtselect" data-districtselect="Salzburg-Umgebung">Salzburg-Umgebung</div>
      <div class="districtselect" data-districtselect="St. Johann im Pongau">St. Johann im Pongau</div>
      <div class="districtselect" data-districtselect="Tamsweg">Tamsweg</div>
      <div class="districtselect" data-districtselect="Zell am See">Zell am See</div>
    </div>
  </div>
  <div class="countryselect glyphicon glyphicon-refresh" data-countryselect="reset" style="margin-top: -1px;"></div>

 
</body>

Answer 4

问题出在CSS样式表上。请将districtselectwrap的css更改为以下内容：

.districtselectwrap {
    position: relative;
    display: none;
    z-index: 50;
    top: 44px;
}

这可以解决问题，然后可以正常工作。

我希望这对您有帮助

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

4 个答案: