如果将鼠标悬停在其他链接上，则需要停用点击功能

Question

我正在使用Dropdown菜单，并为Dropdown项添加了悬停效果，但是我正在挣扎的是，当我单击链接时，下拉菜单打开，但是当我悬停时，该单击功能仍处于激活状态。

请查看随附的图片以获取更多清晰度，如果您需要更多详细信息，请告诉我：

HTML代码：

.dropdown:hover .dropdown-menu {
	display: block;
}

JS代码：

$(function() {
		$('.navbar-nav li a').filter(function() {
			return this.href == location.href
		}).parent().addClass('active').siblings().removeClass('active');
		$('.navbar-nav li a').click(
				function() {
					$(this).parent().addClass('active').siblings().removeClass(
							'active');
				})
	});

Answer 1

HTML

<div id="myDIV">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>

CSS：设计自己的

尝试这个纯JavaScript代码

        // Get the container element
        var btnContainer = document.getElementById("myDIV");

        // Get all buttons with class="btn" inside the container
        var btns = btnContainer.getElementsByClassName("btn");

        // Loop through the buttons and add the active class to the current/clicked button
    for (var i = 0; i < btns.length; i++) {
     btns[i].addEventListener("click", function() {
     var current = document.getElementsByClassName("active");
     current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
    });
    }