Question

我的导航栏上只有很少的项目，并且汉堡图标应以较小的宽度显示，此时导航栏上的项目应隐藏。使用按钮，我想将其显示更改为bo flex，并将flex-direction设置为column，因此项目将垂直显示。我正在尝试使用此功能，您能建议我一些吗？

这是代码：

    Do While Not rst.EOF ' rst is a DAO.Recordset of shipping dates ordered chronologicly. multiple items can ship the same day
        If rst![Ship] <> currDay Then ' if nothing left to ship this day, move to next cell/row
            Exit Do
        End If

        Set DDown = doc.Tables(1).Cell(i, j).Range.ContentControls.Add(wdContentControlDropdownList) 'This line fails upon adding a second dropdown to a cell

        ' move current selection to after the end of the newly added control
        doc.Application.Selection.Start = DDown.Range.End+1

        'Add items to dropdown
        DDown.DropdownListEntries.Add "Shipping within 7 days"
        DDown.DropdownListEntries.Add "On schedule"
        DDown.DropdownListEntries.Add "On Hold"

    Loop

let btn = document.getElementById('btn');
let menu = document.getElementsByClassName('hammburger-links')[0];


btn.addEventListener('click', function() {
    menu.classList.toggle('openmenu');
});

.slider .hammburger-menu {
  width: 16px;
  height: 14px;
  border: 0;
  display: none;
  position: absolute;
}

@media (max-width: 1425px) {
  .slider .hammburger-menu {
    display: inline;
  }
  .slider .hammburger-menu div {
    background-color: #202124;
    display: block;
    width: 16px;
    height: 2px;
    margin: 4px 0;
  }
}

.slider .hammburger-links {
  padding: 0 1.250em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.slider .hammburger-links a {
  padding: 0 1.500em;
  text-decoration: none;
  font-family: "Helvetica", Arial;
  font-size: 11px;
  color: #a6adb4;
}

@media (max-width: 1425px) {
  .slider .hammburger-links a {
    display: none;
  }
}

.slider .hammburger-links .under-home {
  position: absolute;
  top: 2.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #F6F8F9;
  min-width: 12.5em;
  min-height: 12.5em;
  z-index: 1;
  display: none;
}

.slider .hammburger-links .under-home a {
  margin: 10px 0;
}

.slider .hammburger-links.openhome {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.slider .hammburger-links.openmenu a {
  display: flex;
  flex-direction: column;
}

Answer 1

document.getElementsByClassName返回一个数组。因此，您想执行let menu = document.getElementsByClassName('hammburger-links')[0];或通过id（菜单）获取元素。

这样做应该将所需的类添加到#menu元素中，但是CSS也有问题。您的CSS选择器.slider .hammburger-links .openmenu未选择任何内容。该选择器将查找元素.openmenu，它是元素.hammburger-links的后代，它是元素.slider的后代。您需要属于hammburger-links 和 openmenu类的元素。选择器如下所示：.slider .hammburger-links.openmenu

但是，这仍然不能显示菜单元素。我发现再次将选择器更改为目标子锚元素（.slider .hammburger-links.openmenu a）可以解决问题，但是您可能希望根据实现方式的不同而有所不同。

汉堡菜单以较低的宽度下拉

1 个答案: