Question

我没有编码专家，如果愚蠢的错误就道歉 -

我希望在侧面菜单打开时隐藏打开侧面菜单的图标，并在侧面菜单关闭时显示。这是我的代码到目前为止的相关片段，但它不起作用。它是否与范围有关或者我的jquery是错的还是什么？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="side-menu" class="side-bar">
  <!-- Close Button -->
  <a href="#" id="btn-close" onclick="closeSlideMenu()">&times;</a>
  <!-- Links -->
  <a href="#">Home</a>
  <a href="#">Account</a>
  <a href="#">Logout</a>
</div>

<!-- Open sidebar icon -->
<div id="menu-icon">
  <span class="open-slide">
    <a href="#" onclick="openSlideMenu()">
      <img src="./images/menu.svg" width="30" height="30">
    </a>
  </span>
</div>

O(log(n))

Answer 1

显示/隐藏带有您的功能的图标，而不是检查何时调用该功能：

function openSlideMenu() {
  document.getElementById('side-menu').style.width = '250px';
  document.getElementById('heading-one').style.marginLeft = '250px';
  $(".open-slide").hide();
}

function closeSlideMenu() {
  document.getElementById('side-menu').style.width = '0';
  document.getElementById('heading-one').style.marginLeft = '0';
  $(".open-slide").show();
}

Answer 2

显示/隐藏侧边菜单的功能不正确。您可以在openSlideMenu()和closeSlideMenu()功能中显示/隐藏菜单。

检查代码以获取帮助：

 function openSlideMenu() {
  document.getElementById('side-menu').style.width = '250px';
  document.getElementById('heading-one').style.marginLeft = '250px';
  document.getElementByClassName('open-slide').style.visibility = 'hidden';
 }

 function closeSlideMenu() {
  document.getElementById('side-menu').style.width = '0';
  document.getElementById('heading-one').style.marginLeft = '0';
  document.getElementByClassName('open-slide').style.visibility = 'visible';
 }

希望这有帮助

Answer 3

据我所知，你不能把这个函数放在if语句中 - 更好的是检查你正在改变的元素。

例如，如果.side-menu元素为250px，则隐藏图像 - 否则显示图像。

侧面菜单打开时如何隐藏图像

3 个答案: