JavaScript Accordian Navbar / Dropdown的打开和关闭

时间：2018-10-28 03:59:23

标签： javascript html css dropdown

我现在正在处理水平手风琴下拉菜单导航栏，我正在尝试将其扩展为一次只能扩展一个部分。因此，当展开A小节并单击B小节时，A小节将关闭，而B小节将展开。现在，它们都可以立即扩展。

谢谢您的帮助！

（此外，我意识到这并不是一个真正的下拉列表，但我也不确定侧滑会减少混乱的可能性）

$(function () {

  $(".item").on("click", function () {
    $(this)
      .next().toggleClass("active");
  });
  
  $("#body").css("min-height", "100%");

  
});


$(document).ready(function() {

  var $overlay = $('<div class="overlay"></div>');
  var $href = $('this').attr('href');
  var $popup = $('.pop-window');

  $('<div class="close">x</div>').appendTo($popup);
  $popup.hide();

  $('a').click(function(e) {
    e.preventDefault();
    $overlay.fadeIn(800).appendTo('body');
    $popup.delay(800).slideDown();
  });

  $overlay.click(function() {
    $overlay.delay(800).fadeOut();
    $popup.slideUp();
  });

  $('.close').click(function() {
    $popup.slideUp();
    $overlay.delay(800).fadeOut();
  });
});
*{
  box-sizing: border-box;
}
body{
  background: #eaeaea;
  color: #333333;
margin: 0 0 100px;
bottom: 1rem;

}

body.background{
	  background-image: url("lab3.jpg");
	  background-repeat: no-repeat;
	  background-attachment: fixed;
	  background-position: center; 
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  color: #333333;
margin: 0 0 100px;
bottom: 1rem;

}




html{
	overflow-x: hidden;
	width:100%;
	min-height:100%;
	position: relative;
	margin:0;


}



.header{
	height:100px;
	width:110%;
	background-color:#3a1f51;
	color:white;
	display: block;
	margin:-10px;
	top:-10px;
	padding:-10px;
	margin-bottom:-20px;
	position:relative;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	z-index:2;
}

h1{
	margin:0;
	margin-bottom:10px;
	margin-left:40px;
	padding:0;
	position: absolute;
	bottom:0;
	color:#d1d1d1;
	font-family: Roboto, sans-serif;
	letter-spacing: 5px;
	font-size:18;
}



.slidebox{
	top:10px;
	left:-10px;
	float:left;
	display:block;
	background-color:#d2d2d2;
	width:110%;
	height:40px;
	position:relative;
	z-index:1;
	margin:0;
	padding:0px;
	position:relative;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

section {
  width: 150%;
  margin: 0px auto;
  margin-left:-15px;
  font-family: Raleway, sans-serif;

}
.item{
  font-size: calc(8px + .55vw);
  width:9%; 
  height: 40px;
  float: left;
  border-right: 4px solid #d2d2d2;
  font: monospace;
  padding: 10px;
  cursor: pointer;
	background-color:#3a1f51;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-family: Raleway, sans-serif;
  color:#eaeaea;

}

.info{
  font-size: calc(8px + .55vw);
  float: left;
  width:0%;
  height: 40px;
  visibility: hidden;
  font: monospace;
  background-color: #d2d2d2;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  transition: width ease-out .3s, visibility ease-out .3s;
  white-space: nowrap;
  overflow:hidden;
  padding: 10px 0;
  font-family: Raleway, sans-serif;


}
.info.active{
  visibility: visible;
  width:12%;
  font-family: Raleway, sans-serif;

  
}
.nitem{
  font-size: calc(8px + .55vw);
  width:9%; 
  height: 40px;
  float: left;
  border-right: 4px solid #d2d2d2;
  font: monospace;
  padding: 10px;
  cursor: pointer;
	background-color:#3a1f51;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-family: Raleway, sans-serif;
  color:#eaeaea;
}

.pop-window {
  width: 60%;
  z-index: 999;
  background: #fff;
  margin: 0 auto;
  border: 2px solid #cdcdcd;
  padding: 20px;
  position: absolute;
  top: 30%;
  left: 20%;  
	font-size: 1.4vw;
	font-family: Raleway, sans-serif;
	background-color: rgba(230,230,230, 0.85);
	padding:1%;
	border-radius:25px;
	padding-top:0.5%;
	padding-bottom:.1%;
}

.overlay {
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
}



.close {
  position: absolute;
  right: 15px;
  top: 10px;
  color: #000;
  cursor: pointer;
}

.homebutton{
	color: #333;
	font-size: 1.4vw;
	font-family: Raleway, sans-serif;

}

button {
  border: .2vw solid rgba(134, 134, 134, .5);
  padding: 10px 20px;
  background: rgba(134, 134, 134, 0);
  display: block;
  margin: auto;
  position:fixed;
  top:53%;
  left:40%;
  width: calc(20%);
  cursor: pointer;

}

button a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s all;
}

button:hover {
  background: rgba(134, 134, 134, 0.5);
  transition: 0.5s all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html >
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <head>


	<script type="text/javascript">
	  <!--
	  if (screen.width <= 800) {
		window.location = "mobile";
	  }
	  //-->
	</script>



  <meta charset="UTF-8">
  <title>Title</title>
		<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto" rel="stylesheet">
  
  
		<link rel="stylesheet" href="css/style.css">

  
</head>

<body class="background">

   <div class=header>


   
		<h1>Title</h1>
   
   </div>



   
	<div class="slidebox">
	  <section>
	  <div class="item"> header &#8250</div>
	  <div class="info"><a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolded2" style="text-decoration: none; color:#6a27b2;">subheader</a> &nbsp; | &nbsp; <a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a></div>

	  <div class="item"> header &#8250</div>
	  <div class="info"><a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a> &nbsp; | &nbsp; <a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a></div>
	  
	  <a href="https://codepen.io/SideSlaw/pen/vWZVVN" style="text-decoration: none; color:#6a27b2;"><div class="nitem"> header</div></a>
	 
	  <a href="https://codepen.io/SideSlaw/pen/vWZVVN" style="text-decoration: none; color:#6a27b2;"><div class="nitem"> header</div></a>
	  </section>
	</div>
  

<div class="back container">
    <a class="spec" href="#"><button><p class="homebutton">Clickable</p></button></a>
</div> 

<div class="pop-window">
    <div class="inner">
        <h2>Body Title</h2>
		<p>Body Text</p>

    </div>
</div>
	
	
</body>

</html>

1 个答案:

答案 0 :(得分：3)

因此，只需在每次单击上$('.info').removeClass('active');，然后再向单击的元素中添加新类，但是要保持切换工作，也不应删除current info active类：< / p> 

$(function () {

  $(".item").on("click", function () {
    var $nextInfo = $(this).next();
    $('.info').not($nextInfo).removeClass('active');
    $nextInfo.toggleClass("active");
  });
  
  $("#body").css("min-height", "100%");

  
});


$(document).ready(function() {

  var $overlay = $('<div class="overlay"></div>');
  var $href = $('this').attr('href');
  var $popup = $('.pop-window');

  $('<div class="close">x</div>').appendTo($popup);
  $popup.hide();

  $('a').click(function(e) {
    e.preventDefault();
    $overlay.fadeIn(800).appendTo('body');
    $popup.delay(800).slideDown();
  });

  $overlay.click(function() {
    $overlay.delay(800).fadeOut();
    $popup.slideUp();
  });

  $('.close').click(function() {
    $popup.slideUp();
    $overlay.delay(800).fadeOut();
  });
});
*{
  box-sizing: border-box;
}
body{
  background: #eaeaea;
  color: #333333;
margin: 0 0 100px;
bottom: 1rem;

}

body.background{
	  background-image: url("lab3.jpg");
	  background-repeat: no-repeat;
	  background-attachment: fixed;
	  background-position: center; 
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  color: #333333;
margin: 0 0 100px;
bottom: 1rem;

}




html{
	overflow-x: hidden;
	width:100%;
	min-height:100%;
	position: relative;
	margin:0;


}



.header{
	height:100px;
	width:110%;
	background-color:#3a1f51;
	color:white;
	display: block;
	margin:-10px;
	top:-10px;
	padding:-10px;
	margin-bottom:-20px;
	position:relative;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	z-index:2;
}

h1{
	margin:0;
	margin-bottom:10px;
	margin-left:40px;
	padding:0;
	position: absolute;
	bottom:0;
	color:#d1d1d1;
	font-family: Roboto, sans-serif;
	letter-spacing: 5px;
	font-size:18;
}



.slidebox{
	top:10px;
	left:-10px;
	float:left;
	display:block;
	background-color:#d2d2d2;
	width:110%;
	height:40px;
	position:relative;
	z-index:1;
	margin:0;
	padding:0px;
	position:relative;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

section {
  width: 150%;
  margin: 0px auto;
  margin-left:-15px;
  font-family: Raleway, sans-serif;

}
.item{
  font-size: calc(8px + .55vw);
  width:9%; 
  height: 40px;
  float: left;
  border-right: 4px solid #d2d2d2;
  font: monospace;
  padding: 10px;
  cursor: pointer;
	background-color:#3a1f51;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-family: Raleway, sans-serif;
  color:#eaeaea;

}

.info{
  font-size: calc(8px + .55vw);
  float: left;
  width:0%;
  height: 40px;
  visibility: hidden;
  font: monospace;
  background-color: #d2d2d2;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  transition: width ease-out .3s, visibility ease-out .3s;
  white-space: nowrap;
  overflow:hidden;
  padding: 10px 0;
  font-family: Raleway, sans-serif;


}
.info.active{
  visibility: visible;
  width:12%;
  font-family: Raleway, sans-serif;

  
}
.nitem{
  font-size: calc(8px + .55vw);
  width:9%; 
  height: 40px;
  float: left;
  border-right: 4px solid #d2d2d2;
  font: monospace;
  padding: 10px;
  cursor: pointer;
	background-color:#3a1f51;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-family: Raleway, sans-serif;
  color:#eaeaea;
}

.pop-window {
  width: 60%;
  z-index: 999;
  background: #fff;
  margin: 0 auto;
  border: 2px solid #cdcdcd;
  padding: 20px;
  position: absolute;
  top: 30%;
  left: 20%;  
	font-size: 1.4vw;
	font-family: Raleway, sans-serif;
	background-color: rgba(230,230,230, 0.85);
	padding:1%;
	border-radius:25px;
	padding-top:0.5%;
	padding-bottom:.1%;
}

.overlay {
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
}



.close {
  position: absolute;
  right: 15px;
  top: 10px;
  color: #000;
  cursor: pointer;
}

.homebutton{
	color: #333;
	font-size: 1.4vw;
	font-family: Raleway, sans-serif;

}

button {
  border: .2vw solid rgba(134, 134, 134, .5);
  padding: 10px 20px;
  background: rgba(134, 134, 134, 0);
  display: block;
  margin: auto;
  position:fixed;
  top:53%;
  left:40%;
  width: calc(20%);
  cursor: pointer;

}

button a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s all;
}

button:hover {
  background: rgba(134, 134, 134, 0.5);
  transition: 0.5s all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html >
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <head>


	<script type="text/javascript">
	  <!--
	  if (screen.width <= 800) {
		window.location = "mobile";
	  }
	  //-->
	</script>



  <meta charset="UTF-8">
  <title>Title</title>
		<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto" rel="stylesheet">
  
  
		<link rel="stylesheet" href="css/style.css">

  
</head>

<body class="background">

   <div class=header>


   
		<h1>Title</h1>
   
   </div>



   
	<div class="slidebox">
	  <section>
	  <div class="item"> header &#8250</div>
	  <div class="info"><a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolded2" style="text-decoration: none; color:#6a27b2;">subheader</a> &nbsp; | &nbsp; <a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a></div>

	  <div class="item"> header &#8250</div>
	  <div class="info"><a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a> &nbsp; | &nbsp; <a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a></div>
	  
	  <a href="https://codepen.io/SideSlaw/pen/vWZVVN" style="text-decoration: none; color:#6a27b2;"><div class="nitem"> header</div></a>
	 
	  <a href="https://codepen.io/SideSlaw/pen/vWZVVN" style="text-decoration: none; color:#6a27b2;"><div class="nitem"> header</div></a>
	  </section>
	</div>
  

<div class="back container">
    <a class="spec" href="#"><button><p class="homebutton">Clickable</p></button></a>
</div> 

<div class="pop-window">
    <div class="inner">
        <h2>Body Title</h2>
		<p>Body Text</p>

    </div>
</div>
	
	
</body>

</html>

相关问题
最新问题