Question

我希望能够打开一个下拉菜单，当我选择其中一个选项时，会弹出一个小窗口，提供更多选项。我发现这张照片中显示的内容：http://datasmugglers.com/wp-content/uploads/mute-someone.jpg

我尝试了一些我找到的解决方案，但无论我做什么，它似乎都没有效果。我找不到任何错误，但我试图完全按照别人在上一个问题中给我的模板来做，而这只是不起作用。

＆＃13;

//toggles the hidden dropdown
function dropdown() {
	document.getElementById("myDropdown").classList.toggle('show');
}
//opens a popup window from clicking settings
function settings() {
	document.getElementById('settingsD').classList.toggle('show');
}

＆＃13;

/* dropdown button*/
.dropbtn {
	background-color:#4caf50;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
}

/*drop down button on hover & focus*/
.dropbtn:hover, .dropbtn:focus {
	background-color: #3e8e41;
}

/*the container <div> needed to postision the content */
.dropdown {
	position: relative;
	display: inline-block;
}

/*dropdown content*/
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/*changes the style of the list*/
.dropdown-content2 {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/*links in the dropdown*/
.dropdown-content a:hover {background-color: #f1f1f1}

/*show the dropdown (use Js to add this class to the dropwdown-content container when its clicked)*/
.show {display:block;}

.settings {
	display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10000;
    max-width: 26em;
    height: 199px;
    padding: 28px 22px;
    border: 4px solid rgb(197, 218, 255);
    background: black;
}

＆＃13;

<!DOCTYPE html>

<html>
	<link type="text/css" rel="stylesheet" href="dropdown.css">
	<script src="dropdown.js" type="text/javascript"></script>
	<head>
		<div class="dropdown">
			<button onclick='dropdown()' class="dropbtn">Dropdown</button>
				<div id="myDropdown" class="dropdown-content">
					<div class='dropdown-content2' onclick="settings()">Settings</div>
						<span id='settingsD' class='settings'>These are the settings</span>
					<div class='dropdown-content2'>Link 2</div>	
					<div class='dropdown-content2'>Link 3</div>
				</div>
		</div>
	</head>
</html>

＆＃13;

正如您所看到的，我无法点击下拉列表的设置部分并显示设置文字，我不确定原因。感谢您的帮助！

Answer 1

您必须将.show放在.settings下方的css中。如果您这样做，display:block;中的.show会被display:none;中的.settings覆盖。

如果.settings:not(.show)的css都不显示，那么你可以.settings。

从下拉菜单

1 个答案: