Question

我想要隐藏我的下拉菜单，向右，以便在点击设置徽标时出现但由于某种原因它无法正常工作。如果有人可以查看我的代码，看看问题是什么，那将是一个很大的帮助。

＆＃13;

 function Startgame() {
   var x = Math.floor(Math.random() * 13) + 1;
   document.getElementById('computer').src = 'card' + x + '.gif';
   document.getElementById('startButton').disabled = "false";
 }

 function reset() {
   total = 0
   document.getElementById('computer').src = 'dieDefault.gif';
   document.getElementById('img2').src = 'dieDefault.gif';
   document.getElementById('score').innerHTML = "0" + total;
 }

 function puppies() {
     document.getElementById('higher').disabled = "false";
     document.getElementById('equal').disabled = "false";
     document.getElementById('lower').disabled = "false";
   }
   /////DROPDOWN MENU/////////////
 var menuIsOpen = "false";
 window.onload = initialise;

 function initialise() {
   document.getElementById('togglemenu').onclick = navigate;
 }

 function navigate() {
   var panel = document.getElementById("menu");
   if (menuIsOpen) {
     panel.style.right = "-40em";
     menuIsOpen = "false";
     document.getElementById('togglemenu').innerHTML = "Open";
   } else {
     panel.style.top = "0em";
     menuIsOpen = "true";
     document.getElementById('togglemenu').innerHTML = "Close";
   }
 }

＆＃13;

<div id="settings">
  <ul id="menu">
    <b> Colour</b>
    <form action="menu">
      <li>
        <input type="radio" value="blackbackground">Black BG</li>
      <li>
        <input type="radio" value="graybackground">Gray BG</li>
      <li id="togglemenu">
        <img src="settings_img.png" width="60" hieght="60">
      </li>
    </form>
</div>
<div id="bodydiv">
  <h1> Card Game</h1>
  <img src="back.gif" id="computer">
  <div id="comp">Computer</div>
  <div id="arrow">
    <img src="arrow2.png" width="100" height="100">
  </div>
  <img src="back.gif" id="player">
  <div id="play">Player</div>
  <div id="kittens">
    <button id="startButton" onclick="Startgame();">Start Game</button>
    <div id="buttons_1">
      <button id="higher" onload="puppies();">Higher</button>
      <button id="equal">Equal</button>
      <button id="lower">Lower</button>
    </div>
    <button id="draw" onclick="Startgame();">Draw your card</button>
    <div id="resetscore"> <a href="url">Reset Score </a>
    </div>
  </div>
  <div id="score"></div>
</div>

＆＃13;

Answer 1

您的代码出现了不一致和错误，所以我甚至不知道从哪里开始。

有几件事：

如果要检查变量是否为真，则其值应为布尔值（true或false），而不是文本（"true"或{ {1}}）;如果你把布尔值放在引号之间，那么它就变成了文本，而你却不能像你那样检查它。因此，如果您说"false"，则检查var value = "true"和不 if (value == "true")。后者仅在您设置if (value)（不带引号）时才有效。
您必须按照var value = true的顺序设置元素的基本CSS值，即将其设置为top（默认隐藏）。
< / LI>
将position:relative; top:-40em替换为document.getElementById('togglemenu').onclick = navigate;
如果您正确设置CSS以隐藏菜单，则不需要document.getElementById('togglemenu').onclick = function() { navigate() };。

以下是删除绒毛的更新代码，因为它无关紧要：

＆＃13;

initialize

＆＃13;

var menuIsOpen = false;
document.getElementById('togglemenu').onclick = function() { navigate() };

function navigate() {
    var panel = document.getElementById("menu");
    if (menuIsOpen) {
        panel.style.top = "-40em";
        menuIsOpen = false;
        document.getElementById('togglemenu').innerHTML = "Open";
    } else {
        panel.style.top = "0em";
        menuIsOpen = true;
        document.getElementById('togglemenu').innerHTML = "Close";
    }
}

＆＃13;

#menu {
    position:relative;
    top:-40em;
}

＆＃13;

Answer 2

您可以使用JavaScript，使用某种脚本来隐藏菜单，然后当用户点击您的徽标时，使用onclick来调用函数来显示您的div。你的代码没什么帮助，而且我仍然对什么不起作用感到困惑。

看看这个here

Answer 3

total = 0后您错过了分号且HTML无效。看看this

下拉菜单javascript

3 个答案: