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

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

转载作者：太空宇宙更新时间：2023-11-03 22:22:23

我现在正在研究 horizontal-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/

文章推荐： c# - 通过 Ninject 解析对象时指定类型

文章推荐： node.js - babel-core 'transform' 函数找不到插件

javascript - 关闭 Canvas 导航默认打开/关闭
我正在使用的网站上有一个非 Canvas 导航。关闭 Canvas 导航的默认状态是关闭的，这在移动网站上运行良好，因为您可以打开它并选择您的链接，但在桌面上关闭它并打开它会隐藏用户的信息，我希望它是
swift - 关闭/关闭 NSViewController, macOS
我有一个 NSViewController 是这样连接的: 在底部 viewController 中，我尝试使用 self.dismiss(self) 关闭它，但是，它会产生此错误: [General
javascript - 展开搜索关闭单击“关闭 JQuery”
我昨天制作了一个扩展的 JQuery 搜索框，它的作用就像一个魅力!但是，我在创建一个脚本时遇到问题，当用户单击搜索框时，它会关闭。这是我的 JQuery: function expandSearc
javascript - 关闭 InfoWindow - 关闭 onclick - Google map
我一辈子都无法在 API V3 中一次只显示一个信息窗口。我需要一个在下一次开放之前关闭。还希望在 map 上的任何地方关闭 infoWindow onclick。这是否在初始化函数中？这是我的完整
c++ - Asio 端套接字函数 : cancel, 关闭、关闭、释放
关闭和清理套接字的正确方法是什么？我在辅助线程中运行 io_service，我需要关闭与主线程的连接: void closeConnection() { ioc.post([&socket]
java - 使用 Java + Selenium 关闭(关闭)Chrome 打印预览
我的 Selenium 测试看起来像这样:客户选择金融产品，填写一些必要的数据，并在打印预览中显示条款/协议(protocol)文档(根据本地法律的要求)。打印/关闭打印预览对话框后，客户输入更多数据
android - 将(打开/关闭)按钮添加到(打开/关闭)抽屉导航的 Activity
我目前正在从 android 网站了解 Navigation Drawer，我正在使用他们的示例 http://developer.android.com/training/implementing-
android - 无法在 Android 上启动项目 : Error running adb: adb: failed to run abb_exec. 错误:关闭 adb:写入连接错误:关闭
尝试通过 expo 在模拟器上运行 react-native 应用程序时出现此错误。 Couldn't start project on Android: Error running adb: adb
Javascript 关闭？
方法一 function transform(ar) { var alStr = []; for(var i=0; i
抽屉上的Android抽屉导航自定义图标打开/关闭
我想按以下方式自定义我的抽屉导航: 我希望在抽屉打开时显示一个图标，在抽屉关闭时显示另一个图标，而不是将菜单图标稍微向左滑动的当前默认动画。关于我在哪里可以找到类似内容的任何想法/线索？我做了一些
rest - 关闭 requestLog
我们刚刚从 0.6.2 或 0.7 升级了我们的 dropwizard 版本，发现 .yml 文件中的很多配置都发生了变化。尽管我们能够弄清楚其中的大部分，但我们无法弄清楚如何关闭“requestLo
django - celery 关闭
从 celery 2.4.5 升级后，我开始让 celery 随机关闭。我在 centOS 机器上使用 celery 3.0.12、boto 2.6 和 amazon sqs 和 django 1.
c - 为什么文件无法打开/关闭
我试图包含一些语句来指导用户更多地了解文件无法打开或关闭的原因。文件在写入模式下无法打开的一些可能情况是什么？无法关闭怎么办？ FILE *fp; if(!(fp = fopen("testing",
.net - 关闭.Net应用程序的应用程序设置上的DefaultSettingValueAttribute创建
我有一个DLL，可以访问数据库并从存储在配置文件中的应用程序设置中读取连接字符串。然后，引用此DLL的应用程序将需要在其配置文件中为此配置设置设置值。我遇到的问题是，生成的配置代码会通过Defaul
iphone - 关闭 UIDatePicker
我将 UIDatePicker 添加为 UITextField 的输入 View UIDatePicker *oBirth; NSDateFormatter *dateFormat; _edit
iphone - 关闭 UIImagePickerController
我有以下代码: SecondViewController *secondView = [[SecondViewController alloc] initWithNibName:@"SecondVie
c++ - 队列中的双端队列崩溃(关闭)
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想改善这个问题吗？更新问题，以便将其作为on-topic
macos - 拦截选项-关闭
通常，按下 option 键关闭窗口会关闭应用程序中的所有窗口。在我的应用程序中，我希望它仅关闭与用户正在关闭的窗口相关的窗口。我怎样才能做到这一点？我可以为所有窗口实现 windowShouldCl
cocoa - 关闭 NSWindow
我有一个 NSWindow，它托管一个已连接到脚本处理程序的 WebView。现在，当用户单击 WebView 上的控件上的按钮时，它会调用我的对象上的 Objective C 方法。在这种特定情
MacOS - 检测相机何时打开/关闭
我想根据 MBP 上的相机使用情况自动化个人工作流程。基本上我想知道是否任何的摄像头(内置或 USB)已打开或关闭，因此我可以运行我将创建的程序或脚本。我认为如果我需要轮询相机状态也可以，但基于

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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