Javascript Accordian 导航栏/下拉菜单打开和关闭

标签 javascript html css dropdown

我现在正在研究 horizo​​ntal-accordion-dropdown-navbar-thingy，我正试图让它一次只能展开一个部分。因此，当 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>

最佳答案

所以你只需要 $('.info').removeClass('active'); 在你添加新的类到被点击的元素之前，每次点击，但是为了继续切换工作，你应该也不要删除 current info active 类:

$(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>

关于Javascript Accordian 导航栏/下拉菜单打开和关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53028267/

上一篇：html - iPhone 浏览器中的嵌入式推特时间线溢出问题

下一篇：css - 如何从 css 选择器中打开一个单独的 div

相关文章：

javascript - 找到所选元素的最近链接

javascript - 用于匹配 URL/网址的正则表达式

javascript - 为什么这个 .push() 没有按预期工作？

html - 浏览器不关心基于 IMG 元素的大小

jquery - 当 cycle lite 开始运行时定位困惑

javascript - 如何将第二个超链接添加到已被 JavaScript 代码占用的 anchor ？

html - 更改 Bootstrap 导航栏折叠断点

html - 使用css Grid时水平滚动条导致垂直滚动条来

css - 如何创建一个具有最小宽度但可以根据需要拉伸(stretch)的水平居中的 DIV？

HTML- iframe 图片问题

©2024 IT工具网  联系我们