Javascript 通过在框外单击关闭下拉菜单

每当我在我创建的菜单中点击“Urunler”，我就可以成功地打开和关闭“Urunler”下的下拉菜单。当我在框外单击时，它也会成功关闭下拉菜单。为了重新解决我面临的问题，做这件事，看看你自己

1） 点击“Urunler”，确保下拉菜单打开。 2） 单击下拉菜单和“Urunler”之外的某个位置，确保下拉菜单已关闭。 3） 再次点击“Urunler”打开下拉菜单

第一次尝试时，它不会打开下拉菜单，但第二次可以

我是一个彻头彻尾的傻瓜，我真的不知道自己在做什么。我试着在Javascript中通读名为variable scopes的主题，但无法真正了解发生故障的原因。

Javascript

var value = 0;
document.getElementById("products").addEventListener("click", dropShow);
window.addEventListener("mouseup", dropHide);


function dropShow(){
    if(value == 0){
        document.getElementById("dropdown").style.overflow = "visible";
        document.getElementById("dropdown").style.height = "200px";
    }else{
        document.getElementById("dropdown").style.overflow = "hidden";
        document.getElementById("dropdown").style.height = "0px";
    }
    
    if(value == 0){
        value = 1;
    }else{
        value = 0;
    }
}



function dropHide(){  
    document.getElementById("dropdown").style.overflow = "hidden";
    document.getElementById("dropdown").style.height = "0px";
}

在框外单击时，如何通过单击打开下拉菜单？如果您能回答我的问题，我将不胜感激。

编辑： 再次查看您的小提琴和我的示例后，如果愿意，您仍然可以使用

value

，只需在

dropHide

中将其设置为0即可

原始答复： 你的问题是你过度设计了你的解决方案。想想你的功能逻辑：

• 单击后，检查

  值

• 根据

  值

  显示或隐藏下拉列表
• 然后翻转

  值

这就是您的函数所做的，并且将永远这样做—它正在按其应该的方式工作。单击“外部”时，所有类都将被删除，下拉列表将消失。问题是您没有检测到这一点，并翻转

值

更好的方法是检查附加到下拉列表并且受下拉列表外部鼠标单击影响的内容。正确的选择是，每次单击时检查下拉列表是否隐藏，然后执行适当的操作。无需手动更改

值

变量，因为您不再需要它！下面我举了一个例子，请欣赏

var值=0；
document.getElementById（“产品”）.addEventListener（“单击”，dropShow）；
window.addEventListener（“mouseup”，dropHide）；
函数dropShow（）{
让myElement=document.getElementById（“下拉菜单”）；
如果（myElement.style.overflow==“隐藏”）{
myElement.style.overflow=“可见”；
myElement.style.height=“200px”；
}否则{
myElement.style.overflow=“隐藏”；
myElement.style.height=“0px”；
}
}
函数dropHide（）{
document.getElementById（“下拉”）.style.overflow=“隐藏”；
document.getElementById（“下拉列表”）.style.height=“0px”；
}

*{
保证金：0；
填充：0；
/*宽度和高度应用于元素的所有部分：内容、填充和边框*/
框大小：边框框；
}
#菜单{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
#标志{
高度：70像素；
宽度：70px；
}
驾驶员导航{
显示器：flex；
/*此flexbox属性允许按钮区域填充剩余空间，直到徽标区域*/
弹性：1；
}
导航舱{
显示器：flex；
弯曲方向：行；
背景颜色：mediumaquamarine；
证明内容：之间的空间；
弹性：1；
/*此flexbox属性允许按钮区域填充剩余空间，直到徽标区域*/
}
李国荣分区{
显示：flex；/*这三条线或垂直对齐按钮*/
弯曲方向：列；/*这三条线或垂直对齐两个按钮*/
对齐内容：居中；/*这三条线或垂直对齐按钮*/
列表样式类型：无；
背景颜色：蓝色；
弹性：1；
/*此flexbox属性允许按钮区域填充剩余空间，直到徽标区域*/
位置：相对位置；
}
海军陆战队{
显示：flex；/*这三条线或垂直对齐按钮*/
弯曲方向：列；/*这三条线或垂直对齐两个按钮*/
对齐内容：居中；/*这三条线或垂直对齐按钮*/
文字装饰：无；
背景颜色：橙色；
高度：50px；
文本对齐：居中；
利润率：0.5px；
}
驾驶员导航ul li a：悬停{
背景色：#9f7934；
}
.下拉菜单{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
顶部：60px；
位置：绝对位置；
溢出：隐藏；
身高：0；
-webkit过渡：所有.3s轻松；
-moz过渡：全部.3s轻松；
-ms过渡：全部。3秒轻松；
-o-过渡：全部3秒轻松；
过渡：全部。3秒轻松；
}

您好，出现此问题的原因是您的标志（值变量）未在dropHide函数上设置为正确的状态。然而，您的代码有很多可能的优化，我试图在下面的fiddle中向您展示一种更好的方法：

您不需要变量作为标志，您可以使用一个类作为它的标志。例如，show class，这将允许您使用classList方法来切换remove-以这种方式添加它，您也可以摆脱内联css

//JS

//CSS

.dropdownMenu.show {
  overflow:visible;
  height:200px;
}

//HTML

 <li id="products" class="products"><a href="#" class="urunler">Ürünler</a>
                <ul id="dropdown" class="dropdownMenu">
                    <li><a href="#">Ürün 1</a></li>
                    <li><a href="#">Ürün 2</a></li>
                    <li><a href="#">Ürün 3</a></li>
                    <li><a href="#">Ürün 4</a></li>
                </ul>
            </li>

---

实际上我自己也试过了，但不起作用。它弄坏了“乌伦勒”按钮。如果单击“Urunler”打开，则无法关闭b

document.addEventListener("click", toggleDropdown);

function toggleDropdown(event) {
    var dropdown = document.getElementById("dropdown");

    if (event.target.classList.contains('urunler')){
        dropdown.classList.toggle('show');
    } else {
        dropdown.classList.remove('show');
    }

.dropdownMenu.show {
  overflow:visible;
  height:200px;
}

 <li id="products" class="products"><a href="#" class="urunler">Ürünler</a>
                <ul id="dropdown" class="dropdownMenu">
                    <li><a href="#">Ürün 1</a></li>
                    <li><a href="#">Ürün 2</a></li>
                    <li><a href="#">Ürün 3</a></li>
                    <li><a href="#">Ürün 4</a></li>
                </ul>
            </li>