javascript - 将 classList.toggle 添加到代码片段

标签 javascript html css 

button, p, h1, h2, h3, h4, h5, a{       /* State that these particular elements be "fantasy" */
    font-family: Tahoma;
}

#main_body{
    margin: 0px auto;
    background-color: #dedede;
}
#top_body{              /* for the sake of having no margin */
    
}
#top_container{
    text-align:left;
    margin: 4px;
    padding: 0px;
    /*background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%); */
    background:-webkit-linear-gradient(#666, #000);
    position: relative;
    color: aliceblue;
}
#top_header{
    margin: 0px auto;
    padding: 0px auto;
    box-shadow: 3px 3px 3px grey;
    text-decoration: none;
}
#header_hgroup li{
    display:inline-block;
    list-style: none;
    text-decoration: none;
}
.header_text{
    padding-right: 20px;
    padding-left: 20px;
}
#Login_Button{
    float: right;
    height: 80px;
    width: 80px;
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    border: 0px;
    -moz-border-radius-topleft: 15px;
	border-top-left-radius: 15px;
	-moz-border-radius-bottomleft: 15px;
	border-bottom-left-radius: 15px;
}
#Register_Button{
    float: right;
    height: 80px;
    width: 80px;
    background-color:white;
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    border: 0px;
}
#top_nav{
    text-decoration: none;
    border-bottom: 1px solid black;
    padding: 0px;
    margin: 0px auto;
    box-shadow: 3px 3px 3px grey;
    text-align: left;
    position:static
}
#top_nav li{
    display: inline-block;
    text-decoration: none;
}
#nav1{
    border: 1px solid white;
    margin-left: 0px;
}
.class1{
    display: none;
}
#mid_container{
    margin: 0px auto;
    overflow: auto;
    width: 1000px;
    display:block;
    background-color: white;
    border: 1px solid black;
    text-align: center;
    align-content: center;
    margin-bottom: 105px;
}
#container_top_padder{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 50px;
    margin-left: 50px;
    text-align: center;
    border-bottom: 2px solid black;
}
#container_top_padder li{
    text-decoration: none;
    display: inline-block;
    font-weight: none;
}
#individual_top_padder_text{
    margin: 0px auto;
}
#vehicle_1_header{ /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: left;
    border-bottom: 2px solid black;
}
#vehicle_2_header{  /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: left;
    border-bottom: 2px solid black;
}
#vehicle_3_header{  /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: right;
    border-bottom: 2px solid black;
}
.compare_sections_titles{   /* not assigned at the moment */
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 0px;
    display:inline-block;
}
#left_section{
    margin-left: 15px;
    margin-right: 5px;
    margin-bottom: 0px;
    margin-top: 5px;
    float: left;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 48px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#left_side_button1{
    /*background-color: aqua; */
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content1{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content1 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content1 a:hover {
    background-color: #f1f1f1;
}
#left_side_button2{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content2{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content2 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content2 a:hover {
    background-color: #f1f1f1;
}
#left_side_button3{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);   
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content3{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content3 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content3 a:hover {
    background-color: #f1f1f1;
}
#mid_section{
    margin-left: 25px;
    margin-right: 5px;
    margin-bottom: 15px;
    margin-top: 5px;
    float: left;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#mid_side_button4{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content4{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content4 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown_all_text{
    color: black;
    text-align:center;
}
#dropdown_content4 a:hover {
    background-color: #f1f1f1
}
#mid_side_button5{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content5{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content5 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content5 a:hover {
    background-color: #f1f1f1
}
#mid_side_button6{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content6{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content6 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content6 a:hover {
    background-color: #f1f1f1
}
#right_section{
    margin-right: 15px;
    margin-bottom: 0px;
    margin-top: 5px;
    float: right;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#right_side_button7{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content7{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content7 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content7 a:hover {
    background-color: #f1f1f1;
}
#right_side_button8{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content8{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
    z-index: 10000;
}
#dropdown_content8 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content8 a:hover {
    background-color: #f1f1f1;
}
#right_side_button9{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content9{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content9 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#compare_dialog_container{
    margin: 0px auto;
    display: block;
    width: 1000px;
    border: 2px solid black;
    text-align: center;
}
#compare_dialog_container li{
    text-decoration: none;
    font-weight: none;
    list-style: none;
    display: inline-block;
}
#Red_compare_button{
    color: white;
    background:-webkit-linear-gradient(#ff3e3e, #ff0000);
    padding: 10px;
}
#dropdown_content9 a:hover {
    background-color: #f1f1f1;
}
.popup_container{                                       
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.popup{
    position:relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 2px solid #888;
    width: 25%;
    border-radius:28px;	/* Stating that all corners should be rounded */	
	-moz-border-radius:28px; /*<*/
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    text-align: center;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.popup_x{
    color: grey;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.popup_x:hover{
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.popup_head{
    padding: 2px 16px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, lightblue 0%, white 100%);
    color: black;
    box-shadow: 2px 2px 2px #888;
    text-align: center;
    -moz-border-radius-topright: 25px;
	border-top-right-radius: 25px;
	-moz-border-radius-topleft: 25px;
	border-top-left-radius: 25px;
}
.popup_bod{
    padding: 2px 16px;
}
.loginform_bod_text{
    font-weight: bold;
}
.popup_foot{
    padding: 2px 16px;
    color: white;
    -moz-border-radius-bottomright: 25px;
	border-bottom-right-radius: 25px;
	-moz-border-radius-bottomleft: 25px;
	border-bottom-left-radius: 25px;
    background-image: -webkit-radial-gradient(bottom right, ellipse farthest-side, lightblue 0%, white 100%);
    border-top: 1px solid #888;
}
.loginform_foot_text{
    color: black;
    font-weight: none;
    text-decoration: none;
    font-style: none;
    border-top: 2px solid black;
    text-align: center;
}
.loginform_foot_text:hover{
    text-decoration: underline;
}
#register_section{
    float: left;			/* Moves everything this id is around to the left */
	width:640px;
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 10px
}
#register_article{
    border: 2px solid;
	margin-bottom:20px;
	padding:15px;
	color:black;
	box-shadow: 5px 5px 5px #999;
    background:-webkit-linear-gradient(#ffffff, lightblue);
}
.Register_subtitle{
    color:#999999;
}
.Single_span_text_coloring{
    color:#0000CC;
	font-weight:bolder;
}
#register_article_footer{
    text-align: right;
	color: gray;
}
#bottom_container{
    clear:both;
	text-align:center;
	padding:10px;
	border-top: 1px solid;
	background: white;
	color: black;
	text-align:center;
	font-weight:bold;
}
#the_header{
    
}
.show {
    display:inline-block;
}

抱歉，如果这看起来很明显，但我不知道在何处向这段代码添加切换。我已经有了切换的 CSS 代码。我不确定是否需要在 HTML 或 CSS 中添加更多内容。

window.onload = function () {
    "use strict";
    var dict = {
    'left_side_button1': 'dropdown_content1',
    'left_side_button2': 'dropdown_content2',
    'left_side_button3': 'dropdown_content3',
    'mid_side_button4': 'dropdown_content4',
    'mid_side_button5': 'dropdown_content5',
    'mid_side_button6': 'dropdown_content6',
    'right_side_button7': 'dropdown_content7',
    'right_side_button8': 'dropdown_content8',
    'right_side_button9': 'dropdown_content9'
    }
document.onclick = function(e){
    for (var linkage_to_dict in dict) {
        if(e.target === document.getElementById(linkage_to_dict)) {
            document.getElementById(dict[linkage_to_dict]).style.display = 'block';
        }
    }
}
};
.show {
    display:inline-block;
}
<div id="mid_container">
        <header id="container_top_padder">
            <li><h2 id="individual_top_padder_text">Compare Vehicles</h2></li>
        </header>
        <article id="left_section">
            <button id="left_side_button1">Make</button>
            <div class="hidden_border1">
                <div id="dropdown_content1">                    
                <a class="dropdown_all_text" href="#">Cars</a>
                <a class="dropdown_all_text" href="#">Bikes</a>
                <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
            </div>
            <button id="left_side_button2">Model</button>
                <div id="dropdown_content2">
                    <a class="dropdown_all_text" href="#">Cars</a>
                    <a class="dropdown_all_text" href="#">Bikes</a>
                    <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
            <button id="left_side_button3">Year</button>
                <div id="dropdown_content3">
                    <a class="dropdown_all_text" href="#">Cars</a>
                    <a class="dropdown_all_text" href="#">Bikes</a>
                    <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
        </article>
        <article id="mid_section">
            <button id="mid_side_button4">Make</button> 
                <div id="dropdown_content4">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 2</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 3</a></p>
                </div>
            <button id="mid_side_button5">Model</button>
                <div id="dropdown_content5">
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                </div>
            <button id="mid_side_button6">Year</button>
                <div id="dropdown_content6">
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                </div>
        </article>
        <article id="right_section">
            <button id="right_side_button7">Make</button>
                <div id="dropdown_content7">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 2</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 3</a></p>
                </div>
            <button id="right_side_button8">Model</button>
                <div id="dropdown_content8">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                </div>
            <button id="right_side_button9">Year</button>
                <div id="dropdown_content9">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                </div>
        </article>
    </div>

最佳答案

我为每个下拉列表添加了 elm 类。请回顾一下这个:

window.onload = function() {
  "use strict";
  var dict = {
    'left_side_button1': 'dropdown_content1',
    'left_side_button2': 'dropdown_content2',
    'left_side_button3': 'dropdown_content3',
    'mid_side_button4': 'dropdown_content4',
    'mid_side_button5': 'dropdown_content5',
    'mid_side_button6': 'dropdown_content6',
    'right_side_button7': 'dropdown_content7',
    'right_side_button8': 'dropdown_content8',
    'right_side_button9': 'dropdown_content9'
  }
  document.onclick = function(e) {    
    for (var l in dict) {      
      if (e.target === document.getElementById(l)) {        document.getElementById(dict[l]).classList.toggle('show');
      }
    }
  }
};
.show {
  display: block!important;
}
.elm {
  display: none;
}
<div id="mid_container">
  <header id="container_top_padder">
    <li>
      <h2 id="individual_top_padder_text">Compare Vehicles</h2>
    </li>
  </header>
  <article id="left_section">
    <button id="left_side_button1">Make</button>
    <div class="hidden_border1">
      <div id="dropdown_content1" class="elm">
        <a class="dropdown_all_text" href="#">Cars</a>
        <a class="dropdown_all_text" href="#">Bikes</a>
        <a class="dropdown_all_text" href="#">Trucks</a>
      </div>
    </div>
    <button id="left_side_button2">Model</button>
    <div id="dropdown_content2" class="elm">
      <a class="dropdown_all_text" href="#">Cars</a>
      <a class="dropdown_all_text" href="#">Bikes</a>
      <a class="dropdown_all_text" href="#">Trucks</a>
    </div>
    <button id="left_side_button3">Year</button>
    <div id="dropdown_content3" class="elm">
      <a class="dropdown_all_text" href="#">Cars</a>
      <a class="dropdown_all_text" href="#">Bikes</a>
      <a class="dropdown_all_text" href="#">Trucks</a>
    </div>
  </article>
  <article id="mid_section">
    <button id="mid_side_button4">Make</button>
    <div id="dropdown_content4" class="elm">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 2</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 3</a>
      </p>
    </div>
    <button id="mid_side_button5">Model</button>
    <div id="dropdown_content5" class="elm">
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
    </div>
    <button id="mid_side_button6">Year</button>
    <div id="dropdown_content6" class="elm">
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
    </div>
  </article>
  <article id="right_section">
    <button id="right_side_button7">Make</button>
    <div id="dropdown_content7" class="elm">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 2</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 3</a>
      </p>
    </div>
    <button id="right_side_button8">Model</button>
    <div id="dropdown_content8" class="elm">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
    </div>
    <button id="right_side_button9">Year</button>
    <div id="dropdown_content9" class="elm">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
    </div>
  </article>
</div>

关于javascript - 将 classList.toggle 添加到代码片段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40701628/

上一篇：javascript - 更改 url 不会更改所选的选项卡

下一篇：javascript - 全屏按钮不起作用

相关文章：

javascript - Javascript 中的这两个函数有什么区别？

javascript - 使用 angularjs 获取 html 之外的数据

jquery - jscrollpane 在 firefox 中不起作用，在 chrome 中起作用

html - 显示 : block; VS display: table;

javascript - Brython:从单独的 python 文件调用对象的方法

javascript - Discord.js javascript 命令处理程序 - 找不到模块错误

javascript - IE11 使用 ng-attr-data 为对象添加斜 Angular 边框

javascript - 如何让 <hr/> 标签垂直移动

html - 缩小 CSS 时图标字体会中断

html - 如何保持下拉列表中子标题的宽度与父标题相同？

©2024 IT工具网  联系我们