下拉菜单 java 脚本

Dropdown menu java script

本文关键字：脚本 java 下拉菜单更新时间：2023-09-26

我想隐藏右侧的下拉菜单，以便在单击设置徽标时出现，但由于某种原因它不起作用。如果有人可以看看我的代码并看看问题是什么，那将是一个很大的帮助。

 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";
   }
 }

<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>

您的代码正在消除不一致和错误，所以我什至不确定从哪里开始。

几件事：

如果你想检查一个变量是否为真，它的值应该是布尔值（true或false），而不是文本（"true"或"false"）;如果你把布尔值放在引号之间，它就会变成文本，你将无法像检查它那样检查它。因此，如果您说var value = "true"那么检查它将是if (value == "true")而不是if (value)。后者仅在您设置var value = true（不带引号）时才有效。
您必须设置元素的基本 CSS 值才能top工作，即将其设置为 position:relative; top:-40em（默认隐藏）。
将document.getElementById('togglemenu').onclick = navigate;替换为document.getElementById('togglemenu').onclick = function() { navigate() };
如果将 CSS 设置为最初隐藏菜单，则无需initialize。

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

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";
    }
}

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

<div id="settings">
    <ul> <b> Settings</b>
            <li id="togglemenu">
                <img src="http://placehold.it/140x100" width="60" hieght="60" />
            </li>
    </ul>
    <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>
        </form>
    </ul>
</div>

您在total = 0后错过了分号，HTML 无效。看看这个

你可以

使用JavaScript来做到这一点，有某种脚本来隐藏菜单，然后当用户点击你的标志时，使用onclick调用一个函数来显示你的div。你的代码没有多大帮助，我仍然对什么不起作用感到非常困惑。

看看这个

这里