Question

我想在我的移动网站上找一个汉堡包菜单。

在移动设备上查看时，菜单打开后，菜单会打开，但不会在点击时折叠。 - 这是我的问题

这是我的问题的基本HTML。

我使用的是magento 1.9.2.3

php代码是＆＃34; toplinks＆＃34;。这些不需要解决这个问题。

HTML

ORA-00936: missing expression
00936. 00000 -  "missing expression"

控制菜单的Javascript：

<div class="mobile-links">

        <div id="dropdown" onClick="myFunction()">
        <button class="dropbtn">
        <span><img src="http://www.smockedoverstocks.net/skin/frontend/lee/default/images/hamburger-menu.png"/></span></button>
        <div class="dropdown-content">
        <div class="quick-access five columns omega">
        <?php echo $this->getChildHtml('topLinks') ?>
        </div>
        </div>
        </div>
</div>

菜单的CSS：

        <script language="javascript">
 /* When the user clicks on the button, 
 toggle between hiding and showing the dropdown content */
 function myFunction(ev) {
document.getElementById("dropdown").classList.toggle(show);
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
  Dropdown.classList.remove('show')};

  }
}
}
}
</script>

任何帮助将不胜感激。

谢谢

Answer 1

首先，

   <div class="dropdown">
      <onclick="myFunction()" class="dropbtn">

格式不正确。 onClick应与您的<div>内联，

 <div class="dropdown" onClick="myFunction()">

或在不同的用户界面元素上。接着，

document.getElementById("myDropdown").classList.toggle("show");

应更改为，

document.getElementById("myDropdown").classList.toggle();

将myDropdown的初始状态设置为hide()。例如，

  $(document).ready(function() {
      $('#myDropdown').hide();
  }

这指定在页面加载后执行操作的元素。您可以使用css display属性设置none并设置触发器，将display属性更改为block click，从而完全使用hover进行设置}或{{1}}。希望这有帮助

Answer 2

有这个改编的现场例子：这是你想要实现的行为吗？

＆＃13;

ElementTransformUtils.MirrorElement

＆＃13;

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */

function myFunction(ev) {
  document.getElementById("dropdown").classList.toggle('show');
}

// Close the dropdown menu if the user clicks outside of it

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.collapse('show');

  }
  }
  }
  }

＆＃13;

.mobile-links .dropdown {
  position:relative;
  display:inline-block;
  padding:2px 13px 0px;
  }

.mobile-links .dropdown-content{
  display:none;
  position:absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 5px 12px;
  z-index: 1;
}

#dropdown:hover .dropdown-content,
#dropdown.show .dropdown-content {
  display:block;
  }

＆＃13;

移动下拉菜单不会关闭JavaScript

2 个答案: