Question

本网站的下拉菜单（大窗口）＆＃39;打开＆＃39;当光标悬停在它上面时。我希望下拉列表更改此项并通过单击打开，但仅在窗口大小足够小后（顶部导航栏变为滑动侧边栏时）。感谢任何帮助我的人。

编辑：问题几乎已修复，只需要在再次点击按钮时关闭下拉菜单。

以下是我的所有代码（HTML，CSS和JavaScript）：

＆＃13;

function openNav(){
    $('body').addClass('open');
}

function closeNav(){
    $('body').removeClass('open');
}


//Newly Added (this opens the dropdown when it is clicked)
function openDrop() {
	$('body').addClass('show');
}

//Newly Added (this closes the dropdown when something is clicked (specified in html file via onclick = "closeDrop()"
function closeDrop() {
	$('body').removeClass('show');
}

＆＃13;

html {
    min-height: 100%;
    height: auto;
    background: linear-gradient(#e6e6e6, white);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}

body {
    -webkit-font-smoothing: antialiased;
    margin: 0%;
    font-family: Arial;
    scroll-behavior: smooth;
    height: auto
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #80bfff;
}

::-webkit-scrollbar-track {
    background: #f2f2f2;
}

::-webkit-scrollbar-thumb {
    border-radius: 25px;
    border-style: solid;
    border-color: #f2f2f2;
    border-width: 2px;
    background: #3399ff;
}

* {
    box-sizing: border-box;
}

.header {
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    font-size: 187%;
    text-align: left;
    padding: 1.5%;
    background-color: white;
    color: grey;
    z-index: 2;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

#main1 {
	color: #3399ff;
}

.content {
    overflow: hidden;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 10px;
}

.card {
    flex: 25%;
    max-width: 25%;
    padding: 0px 4px;
}

.card p {
    float: left;
    background-color: white;
    box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: 0.3s;
    margin-top: 8px;
    vertical-align: middle;
}

.card p:hover {
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2);
}

.card a {
    float: left;
    color: grey;
    text-align: center;
    text-decoration: none;
    display: block;
    border-radius: 5px;
    padding: 2%;
    transition: 0.3s;
}

.card a:hover {
    box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
    background-color: #fbfbfb;
    color: #3399ff;
}

.card-home {
    position: relative;
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 5%;
    margin-bottom: 10%;
}

.card-home p {
    float: left;
    background-color: white;
    box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 30px;
    font-size: 120%;
    transition: 0.3s;
    margin-top: 8px;
    vertical-align: middle;
}

.card-home p:hover {
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2);
}

.card-home a {
    float: left;
    color: grey;
    text-align: center;
    text-decoration: none;
    display: block;
    border-radius: 5px;
    padding: 1%;
    transition: 0.3s;
}

.card-home a:hover {
    box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
    background-color: #fbfbfb;
    color: #3399ff;
}

.navigation {
    z-index: 1;
    width: 100%;
    list-style-type: none;
    background-color: white;
    box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    padding-top: 0px;
    height: auto;
}

#sidebar {
    width: 100%;
}

li {
    float: left;
}

li a, .dropbtn {
    background-color: white;
    display: block;
    text-align: center;
    width: 100%;
    height: auto;
    padding: 15px;
    font-size: 100%;
    color: grey;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
    background-color: #f2f2f2;
}

@media (screen and max-width: 1500px) {
    .card {
        flex: 50%;
        max-width: 50%;
    }
}

@media (max-width: 800px) {
    li {
        float: none;
    }

    .card {
        margin-top: 4.2em;
        flex: 100%;
        max-width: 100%;
    }

    .card-home {
        margin-top: 5em;
        margin-left: 20px;
        margin-right: 20px;
    }

    .navigation {
        z-index: 2;
        height: 100%;
        width: 0;
        position: fixed;
        background-color: #e6e6e6;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
    }

    li {
        background: #e6e6e6;
    }

    li a, .dropbtn {
        background-color: #e6e6e6;
        float: left;
        text-align: left;
        padding: 10px;
        width: 100%;
        text-decoration: none;
        font-size: 25px;
        display: inline-block;
        z-index: 1;
    }

    .closebtn {
        width: auto;
        float: right;
        padding: 6px 16px 6px 16px;
        position: absolute;
        text-align: center;
        top: 5px;
        right: 5px;
        font-size: 36px;
        margin-left: 50px;
    }

    .about a {
        float: left;
    }

    .closebtn:hover {
        border-radius: 50%;
    }

    #main1 {
        transition: margin-left 0.5s;
    }

    #main2 {
        transition: margin-left 0.5s;
    }

    .header {
        position: fixed;
        box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
    }

    .header span {
        padding: 5px;
    }

    #sidebar {
        width: 0px;
    }

    .open #sidebar{
        width:250px;
    }

    .open #main1 {
        margin-left:250px;
    }

    .open #main2 {
        margin-left:250px;
    }
	
	/*.dropdown:hover .dropdown-content {
		display: block;
		position: relative;
		background-color: #e6e6e6;
	}*/
}

@media (min-width: 800px) {
    .closebtn {
        display: none;
    }

    .header span {
        display: none;
    }

    .dropdown i {
        display: none;
    }
	
	.dropdown:hover .dropdown-content {
		display: block;
	}
	
	.bottom {
		border-radius: 0px 0px 5px 5px;
	}
	
	.dropdown-content {
		background-color: #f2f2f2;
	}
	
	.about {
		float: right;
		position: relative;
	}
}

/*Newly added*/
.show #myDropdown {
	display: block;
	position: relative;
	background-color: #e6e6e6;
}

li .dropdown {
    display: inline-block;
}

.dropdown-content a {
    text-align: left;
    color: grey;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: white;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 103px;
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.3);
    border-radius: 0px 0px 5px 5px;
    z-index: 2;
}

.dropdown button {
    border: none;
}

button:focus {
    outline: none;
}

.fa-caret-down {
    float: right;
    padding-right: 8px;
}

.active {
    background-color: #3399ff;
    color: white;
}

.active:hover {
    background-color: #80bfff;
    transition: 0.5s;
}

br.clearLeft {
    clear: left;
}

＆＃13;

<!DOCTYPE html>
<html>


<head>
<title>Home</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel = "stylesheet" href = "style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "script.js"></script>
</head>


<body>
<div id = "main1"; class = "header";>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
    Website
</div>

<div id = "sidebar"; class = "navigation">
    <li><a class = "active" href = "Home.html">Home</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li class = "dropdown">
		<!--Newly edited (added onclick = "openDrop()")-->
        <button onclick = "openDrop()" class = "dropbtn">
            Dropdown
            <i class = "fa fa-caret-down"></i>
        </button>
		<!--Newly edited (added id = "myDropdown"-->
        <div id = "myDropdown" class = "dropdown-content">
            <a href = "#link1">Link 1</a>
            <a href = "#link2">Link 2</a>
            <a class = "bottom"; href = "#link3">Link 3</a>
        </div>
    </li>
    <li class = "about";><a href="#about">About</a></li>
    <li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></li>
    <br class="clearLeft" />
</div>

<!--Newly added (onclick = "closeDrop()")-->
<div onclick = "closeDrop()">
<div id = "main2"; class = "content";>
    <div class = "card-home";>
        <p>
            Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
            Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
            Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
            Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
            Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
            <br />
            <br />
            <a href = "#link";>Link</a>
        </p>
    </div>
</div>
</div>
</body>


</html>

＆＃13;

Answer 1

您的问题在这一行：

var dropdownContent = document.getElementsByClassName("dropdown-content")

返回的值是一个HTMLCollection，所以你不能像在：

中那样使用它

dropdownContent.style.display

因为您只有一个下拉内容，所以您可以获得第一个元素：

var dropdownContent = document.getElementsByClassName("dropdown-content")[0];

function openNav(){
    $('body').addClass('open');
}

function closeNav(){
    $('body').removeClass('open');
}


var dropdown = document.getElementsByClassName("dropbtn");
var dropdownContent = document.getElementsByClassName("dropdown-content")[0];
var i;

for (i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("click", function() {
        this.classList.toggle("active-btn");
        var dropdown = this.nextElementSibling;
        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    });
}

/* added */
.dropdown-content {
    position: absolute;
}
html {
    min-height: 100%;
    height: auto;
    background: linear-gradient(#e6e6e6, white);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}

body {
    -webkit-font-smoothing: antialiased;
    margin: 0%;
    font-family: Arial;
    scroll-behavior: smooth;
    height: auto
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #80bfff;
}

::-webkit-scrollbar-track {
    background: #f2f2f2;
}

::-webkit-scrollbar-thumb {
    border-radius: 25px;
    border-style: solid;
    border-color: #f2f2f2;
    border-width: 2px;
    background: #3399ff;
}

* {
    box-sizing: border-box;
}

.header {
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    font-size: 187%;
    text-align: left;
    padding: 1.5%;
    background-color: white;
    color: grey;
    z-index: 2;
}

.content {
    overflow: hidden;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 10px;
}

.card {
    flex: 25%;
    max-width: 25%;
    padding: 0px 4px;
}

.card p {
    float: left;
    background-color: white;
    box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: 0.3s;
    margin-top: 8px;
    vertical-align: middle;
}

.card p:hover {
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2);
}

.card a {
    float: left;
    color: grey;
    text-align: center;
    text-decoration: none;
    display: block;
    border-radius: 5px;
    padding: 2%;
    transition: 0.3s;
}

.card a:hover {
    box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
    background-color: #fbfbfb;
    color: #3399ff;
}

.card-home {
    position: relative;
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 5%;
    margin-bottom: 10%;
}

.card-home p {
    float: left;
    background-color: white;
    box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 30px;
    font-size: 120%;
    transition: 0.3s;
    margin-top: 8px;
    vertical-align: middle;
}

.card-home p:hover {
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2);
}

.card-home a {
    float: left;
    color: grey;
    text-align: center;
    text-decoration: none;
    display: block;
    border-radius: 5px;
    padding: 1%;
    transition: 0.3s;
}

.card-home a:hover {
    box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
    background-color: #fbfbfb;
    color: #3399ff;
}

.navigation {
    z-index: 1;
    width: 100%;
    list-style-type: none;
    background-color: white;
    box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    padding-top: 0px;
    height: auto;
}

#sidebar {
    width: 100%;
    height: 70px;  /* added */
}

li {
    float: left;
}

li a, .dropbtn {
    background-color: white;
    display: block;
    text-align: center;
    width: 100%;
    height: auto;
    padding: 15px;
    font-size: 100%;
    color: grey;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
    background-color: #f2f2f2;
}

@media (max-width: 1500px) {
    .card {
        flex: 50%;
        max-width: 50%;
    }
}

@media (max-width: 800px) {
    li {
        float: none;
    }

    .card {
        margin-top: 4.2em;
        flex: 100%;
        max-width: 100%;
    }

    .card-home {
        margin-top: 5em;
        margin-left: 20px;
        margin-right: 20px;
    }

    .navigation {
        z-index: 2;
        height: 100%;
        width: 0;
        position: fixed;
        background-color: #e6e6e6;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
    }

    li {
        background: #e6e6e6;
    }

    li a, .dropbtn {
        background-color: #e6e6e6;
        float: left;
        text-align: left;
        padding: 10px;
        width: 100%;
        text-decoration: none;
        font-size: 25px;
        display: inline-block;
        z-index: 1;
    }

    .closebtn {
        width: auto;
        float: right;
        padding: 6px 16px 6px 16px;
        position: absolute;
        text-align: center;
        top: 5px;
        right: 5px;
        font-size: 36px;
        margin-left: 50px;
    }

    .about a {
        float: left;
    }

    .closebtn:hover {
        border-radius: 50%;
    }

    #main1 {
        transition: margin-left 0.5s;
    }

    #main2 {
        transition: margin-left 0.5s;
    }

    .header {
        position: fixed;
        box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
    }

    .header span {
        color: #3399ff;
        padding: 5px;
    }

    #sidebar {
        width: 0px;
    }

    .open #sidebar{
        width:250px;
    }

    .open #main1 {
        margin-left:250px;
    }

    .open #main2 {
        margin-left:250px;
    }

    .dropdown-content {
        background: #e6e6e6;
        display: none;
    }

    .active-btn {
        background: white;
    }
}

@media (min-width: 800px) {
    .closebtn {
        display: none;
    }

    .header span {
        display: none;
    }

    .dropdown i {
        display: none;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
}

li .dropdown {
    display: inline-block;
}

.dropdown-content a {
    text-align: left;
    color: grey;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: white;
}

/*  added */
#sidebar {
    height: auto;
}

.dropdown-content {
    display: none;
    position: inherit;  /* removed */
    background-color: #f2f2f2;
    min-width: 160px;
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.3);
    border-radius: 0px 5px 5px 5px;
    z-index: 2;
}

.dropdown button {
    border: none;
}

button:focus {
    outline: none;
}

.fa-caret-down {
    float: right;
    padding-right: 8px;
}

.active {
    background-color: #3399ff;
    color: white;
}

.about a {
    float: right;
    position: relative;
}

.active:hover {
    background-color: #80bfff;
    transition: 0.5s;
}

br.clearLeft {
    clear: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div id = "main1"; class = "header";>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
    Website
</div>

<div id = "sidebar"; class = "navigation";>
    <li class = "dropdown">
        <button class = "dropbtn">
            Dropdown
            <i class = "fa fa-caret-down"></i>
        </button>
        <div class = "dropdown-content">
            <a href = "#link1">Link 1</a>
            <a href = "#link2">Link 2</a>
            <a href = "#link3">Link 3</a>
        </div>
    </li>
        <li><a class = "active" href = "Home.html">Home</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li class = "about";><a href="#about">About</a></li>
    <li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></li>
    <br class="clearLeft" />
</div>

<div id = "main2"; class = "content";>
    <div class = "card-home";>
        <p>
            Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
            Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
            Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
            Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
            Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
            <br />
            <br />
            <a href = "#link";>Link</a>
        </p>
    </div>
</div>

Answer 2

感谢您的帮助。我想出了现在该怎么做（在你的帮助下）。它可能不完美，但现在已经足够了。

我这样做的方法是使用：

function openDrop() {
    $('body').addClass('show');
}

和

$('html').click(function(e) {   
    if( !$(e.target).hasClass('dropbtn') ) {
    $('body').removeClass('show');
}
});

顶部功能会在单击按钮时显示下拉列表。

当我/你点击窗口上的任何其他位置时（包括按钮中的箭头），其他代码会删除下拉菜单。

这是完整的程序（您可以运行代码段以查看它是否有效）：

function openNav(){
    $('body').addClass('open');
}

function closeNav(){
    $('body').removeClass('open');
}


//Important!
function openDrop() {
	$('body').addClass('show');
}

//Important!
$('html').click(function(e) {   
if( !$(e.target).hasClass('dropbtn') ) {
    $('body').removeClass('show');
}
});

html {
    min-height: 100%;
    height: auto;
    background: linear-gradient(#e6e6e6, white);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}

body {
    -webkit-font-smoothing: antialiased;
    margin: 0%;
    font-family: Arial;
    scroll-behavior: smooth;
    height: auto
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #80bfff;
}

::-webkit-scrollbar-track {
    background: #f2f2f2;
}

::-webkit-scrollbar-thumb {
    border-radius: 25px;
    border-style: solid;
    border-color: #f2f2f2;
    border-width: 2px;
    background: #3399ff;
}

* {
    box-sizing: border-box;
}

.header {
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    font-size: 187%;
    text-align: left;
    padding: 1.5%;
    background-color: white;
    color: grey;
    z-index: 2;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

#main1 {
	color: #3399ff;
}

.content {
    overflow: hidden;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 10px;
}

.card {
    flex: 25%;
    max-width: 25%;
    padding: 0px 4px;
}

.card p {
    float: left;
    background-color: white;
    box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: 0.3s;
    margin-top: 8px;
    vertical-align: middle;
}

.card p:hover {
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2);
}

.card a {
    float: left;
    color: grey;
    text-align: center;
    text-decoration: none;
    display: block;
    border-radius: 5px;
    padding: 2%;
    transition: 0.3s;
}

.card a:hover {
    box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
    background-color: #fbfbfb;
    color: #3399ff;
}

.card-home {
    position: relative;
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 5%;
    margin-bottom: 10%;
}

.card-home p {
    float: left;
    background-color: white;
    box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 30px;
    font-size: 120%;
    transition: 0.3s;
    margin-top: 8px;
    vertical-align: middle;
}

.card-home p:hover {
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2);
}

.card-home a {
    float: left;
    color: grey;
    text-align: center;
    text-decoration: none;
    display: block;
    border-radius: 5px;
    padding: 1%;
    transition: 0.3s;
}

.card-home a:hover {
    box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
    background-color: #fbfbfb;
    color: #3399ff;
}

.navigation {
    z-index: 1;
    width: 100%;
    list-style-type: none;
    background-color: white;
    box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    padding-top: 0px;
    height: auto;
}

#sidebar {
    width: 100%;
}

li {
    float: left;
}

li a, .dropbtn {
    background-color: white;
    display: block;
    text-align: center;
    width: 100%;
    height: auto;
    padding: 15px;
    font-size: 100%;
    color: grey;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
    background-color: #f2f2f2;
}

@media (screen and max-width: 1500px) {
    .card {
        flex: 50%;
        max-width: 50%;
    }
}

@media (max-width: 800px) {
    li {
        float: none;
    }

    .card {
        margin-top: 4.2em;
        flex: 100%;
        max-width: 100%;
    }

    .card-home {
        margin-top: 5em;
        margin-left: 20px;
        margin-right: 20px;
    }

    .navigation {
        z-index: 2;
        height: 100%;
        width: 0;
        position: fixed;
        background-color: #e6e6e6;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
    }

    li {
        background: #e6e6e6;
    }

    li a, .dropbtn {
        background-color: #e6e6e6;
        float: left;
        text-align: left;
        padding: 10px;
        width: 100%;
        text-decoration: none;
        font-size: 25px;
        display: inline-block;
        z-index: 1;
    }

    .closebtn {
        width: auto;
        float: right;
        padding: 6px 16px 6px 16px;
        position: absolute;
        text-align: center;
        top: 5px;
        right: 5px;
        font-size: 36px;
        margin-left: 50px;
    }

    .about a {
        float: left;
    }

    .closebtn:hover {
        border-radius: 50%;
    }

    #main1 {
        transition: margin-left 0.5s;
    }

    #main2 {
        transition: margin-left 0.5s;
    }

    .header {
        position: fixed;
        box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
    }

    .header span {
        padding: 5px;
    }

    #sidebar {
        width: 0px;
    }

    .open #sidebar{
        width:250px;
    }

    .open #main1 {
        margin-left:250px;
    }

    .open #main2 {
        margin-left:250px;
    }
	
	.show #myDropdown {
		display: block;
		position: relative;
		box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	}
}

@media (min-width: 800px) {
    .closebtn {
        display: none;
    }

    .header span {
        display: none;
    }

    .dropdown i {
        display: none;
    }
	
	.dropdown:hover .dropdown-content {
		display: block;
	}
	
	.show #myDropdown {
		display: block;
	}
	
	.bottom {
		border-radius: 0px 0px 5px 5px;
	}
	
	.dropdown-content {
		background-color: #f2f2f2;
	}
	
	.about {
		float: right;
		position: relative;
	}
}

li .dropdown {
    display: inline-block;
}

.dropdown-content a {
    text-align: left;
    color: grey;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: white;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 103px;
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.3);
    border-radius: 0px 0px 5px 5px;
    z-index: 2;
}

.dropdown button {
    border: none;
}

button:focus {
    outline: none;
}

.fa-caret-down {
    float: right;
    padding-right: 8px;
}

.active {
    background-color: #3399ff;
    color: white;
}

.active:hover {
    background-color: #80bfff;
    transition: 0.5s;
}

br.clearLeft {
    clear: left;
}

<!DOCTYPE html>
<html>


<head>
<title>Home</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel = "stylesheet" href = "style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "script.js"></script>
</head>


<body>
<div id = "main1"; class = "header";>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
    Website
</div>

<div id = "sidebar"; class = "navigation">
    <li><a class = "active" href = "Home.html">Home</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li class = "dropdown">
        <button onclick = "openDrop()" class = "dropbtn">
            Dropdown
            <i class = "fa fa-caret-down"></i>
        </button>
        <div id = "myDropdown" class = "dropdown-content">
            <a href = "#link1">Link 1</a>
            <a href = "#link2">Link 2</a>
            <a class = "bottom"; href = "#link3">Link 3</a>
        </div>
    </li>
    <li class = "about";><a href="#about">About</a></li>
    <li><a href="javascript:void(0)" onclick="closeNav()" class="closebtn">&times;</a></li>
    <br class="clearLeft" />
</div>

<div id = "main2"; class = "content";>
    <div class = "card-home";>
        <p>
            Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
            Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
            Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
            Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
            Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
            <br />
            <br />
            <a href = "#link";>Link</a>
        </p>
    </div>
</div>
</body>


</html>

Answer 3

试试这个：

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
      }
    }
  }
}

＆＃39;悬停＆＃39;下拉到可点击的下拉菜单（通过媒体查询）

3 个答案: