Question

我正在为Chrome扩展程序创建一个下拉菜单。有一些Javascript代码会导致菜单显示，但是当我单击按钮时，下拉菜单只会在消失之前显示一瞬间（看起来像闪烁效果）。任何帮助，将不胜感激。谢谢！

welcome.html

 <form>
                <div class="dropdown">
                <button id="dropdownbtn" class="dropbtn">Dropdown</button>
                  <div id="myDropdown" class="dropdown-content">
                    <a href="#home">Home</a>
                    <a href="#about">About</a>
                    <a href="#contact">Contact</a>
                  </div>
                </div>
                <input type="submit" id="signup" value="Get Started">
            </form>

interface.js

    //Add dropdown
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById("dropdownbtn").addEventListener("click", myFunction);
      //  document.getElementById("dropdownbtn").addEventListener("mouseout", myFunction);
    });

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction()  {
    console.log("in toggle");

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

}

的manifest.json

{
  "manifest_version": 2,

  "name": "Hello World",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "./icons/icon.png",
    "default_popup":  "account.html"
  },
  "manifest_version": 2,
  "content_scripts": [
    {
        "css": ["style.css"],

      "js": [ "content.bundle.js", "interface.js" ],
        "matches": ["<all_urls>"]
    }
  ]
}

Answer 1

也许有人可以解释原因，但似乎是因为您使用<form>元素来包装按钮。删除它并重新运行上面的代码似乎可以无限期地保持下拉列表的活动状态。也许其书面假设点击下拉列表的方式是提交表格，但没有提交？

Answer 2

 document.getElementById("dropdownbtn").addEventListener("click", myFunction);

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction(e)  {
        e.preventDefault();
    console.log("in toggle");

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

}

工作小提琴： https://jsfiddle.net/uzps6Lr1/

下拉菜单会短暂显示然后消失

2 个答案: