以上就是给各位分享单击时如何让菜单栏中的Ahref链接在正文中打开一个关闭的手风琴？-html，同时本文还将给你拓展与空链接的区别、ahref=#与ahref=javascript:void(0)的区
以上就是给各位分享单击时如何让菜单栏中的 A href 链接在正文中打开一个关闭的手风琴？ - html，同时本文还将给你拓展 与空链接的区别、a href=# 与 a href=javascript:void (0) 的区别、a href=#与 a href=javascript:void(0) 的区别、angular-infinite-list 地址：https://github.com/a-jie/angular-infinite-list例子：单击时如何让菜单栏中的 A href 链接在正文中打开一个关闭的手风琴？ - html
单击时如何让菜单栏中的 A href 链接在正文中打开一个关闭的手风琴？ - html
如何解决单击时如何让菜单栏中的 A href 链接在正文中打开一个关闭的手风琴？ - html
当点击名为“打开第一个手风琴”的 a href 时，如何打开第一个手风琴，而第二个 a href 也是如此？手风琴本身 100% 正确工作，我只想从它的范围之外访问它，当点击菜单栏中的 a href 按钮时。
$(".expand").on("click",function () {
$(".right-arrow").text("+");
$(".detail:visible").slideUp();
if(!$(this).next().is(":visible")){
$(this).next().slideDown(200);
$(this).find(".right-arrow").text("-");
}
});/*Tips & Tricks Page*/
*,*:before,*:after {
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
#trickslist {
font-family: ''Open Sans'',sans-serif;
width: 80%;
margin: 0 auto;
display: table;
}
#trickslist ul {
padding: 0;
margin: 20px 0;
color: #555;
}
#trickslist ul > li {
list-style: none;
border-top: 1px solid #ddd;
display: block;
padding: 15px;
overflow: hidden;
text-align: center;
}
#trickslist ul:last-child {
border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
background: #efefef;
}
.expand {
display: block;
text-decoration: none;
color: #555;
cursor: pointer;
}
.tipstricks {
padding: 5px;
margin: 0;
font-size: 17px;
font-weight: 400;
}
span {
font-size: 12.5px;
}
#left,#right{
display: table;
}
.detail a {
text-decoration: none;
color: #C0392B;
border: 1px solid #C0392B;
padding: 6px 10px 5px;
font-size: 14px;
}
.detail {
margin: 10px 0 10px 0px;
display: none;
line-height: 22px;
height: 150px;
}
.detail span{
margin: 0;
}
.right-arrow {
padding-top: 0px;
margin-top: 0px;
margin-left: 20px;
width: 10px;
height: 100%;
float: right;
font-weight: bold;
font-size: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a href="""> Open 1st accordion </a> <br>
<a href="""> Open 2nd accordion </a>
<div>
<divid="accordion1">
<div id="trickslist">
<ul>
<li>
<adata-parent="#accordion1">
<div>+</div>
<div>
<h2>Exploring your Motivations to Quit Tobacco</h2>
</div>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>What to expect over time.</h2>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>Getting Ready: Strategies to conquer urges & set a quit date</h2>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>Quitting tobacco with medications</h2>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>Dealing with depression or stress</h2>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>Avoiding weight gain or alcohol</h2>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>Making your plan stick: relapse prevention</h2>
</a>
<div>
</div>
</li>
</ul>
</div>
</div>
</div>Services.html（此菜单中的每个 href 都应链接到 index.html 中的手风琴并打开它们）
<divid="navbarResponsive">
<ul>
<li>
<ahref="about.html">Who We Are
</a>
</li>
<li>
<ahref="">Our Services</a>
</li>
<liid="nav">
<a href="index.html"> <img src="assets/images/name.png"/> </a>
</li>
<li>
<ahref="">Our Clients</a>
</li>
<li>
<ahref="" >Contact Us</a>
</li>
</ul>
</div>
解决方法
将类添加到顶部标签a：
<ahref=""> Open 1st accordion </a> <br>
<ahref=""> Open 2nd accordion </a>
接下来，使用each()方法和index参数，在这些a标签上编写点击事件的逻辑。
使用 event.preventDefault() 禁用 a 标签的默认行为。
并使用 trigger() 方法，使用带有适当 index 的 .expand 调用 eq() 类上的点击事件：
$(".expand").eq(index).trigger(''click'');
因此，我们得到以下代码。只需将其添加到您的主代码中即可。
$(''.accord'').each(function(index) {
$(this).click(function(event) {
event.preventDefault();
$(".expand").eq(index).trigger(''click'');
});
});
编辑：
考虑到 localStorage() 修改了 jquery 代码。
$(document).ready(function () {
$(".expand").on("click",function () {
$(".right-arrow").text("+");
$(".detail:visible").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown(200);
$(this).find(".right-arrow").text("-");
}
});
let click_state = localStorage.getItem("click_state");
let ind = localStorage.getItem("ind");
if (click_state == 1) {
$(".expand").eq(ind).trigger("click");
localStorage.removeItem("click_state");
localStorage.removeItem("ind");
} else {
}
$(".accord").each(function (index) {
$(this).click(function (event) {
event.preventDefault();
localStorage.setItem("click_state",1);
localStorage.setItem("ind",index);
});
});
});/*Tips & Tricks Page*/
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#trickslist {
font-family: ''Open Sans'',sans-serif;
width: 80%;
margin: 0 auto;
display: table;
}
#trickslist ul {
padding: 0;
margin: 20px 0;
color: #555;
}
#trickslist ul > li {
list-style: none;
border-top: 1px solid #ddd;
display: block;
padding: 15px;
overflow: hidden;
text-align: center;
}
#trickslist ul:last-child {
border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
background: #efefef;
}
.expand {
display: block;
text-decoration: none;
color: #555;
cursor: pointer;
}
.tipstricks {
padding: 5px;
margin: 0;
font-size: 17px;
font-weight: 400;
}
span {
font-size: 12.5px;
}
#left,#right{
display: table;
}
.detail a {
text-decoration: none;
color: #C0392B;
border: 1px solid #C0392B;
padding: 6px 10px 5px;
font-size: 14px;
}
.detail {
margin: 10px 0 10px 0px;
display: none;
line-height: 22px;
height: 150px;
}
.detail span{
margin: 0;
}
.right-arrow {
padding-top: 0px;
margin-top: 0px;
margin-left: 20px;
width: 10px;
height: 100%;
float: right;
font-weight: bold;
font-size: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ahref=""> Open 1st accordion </a> <br>
<ahref=""> Open 2nd accordion </a>
<div>
<divid="accordion1">
<div id="trickslist">
<ul>
<li>
<adata-parent="#accordion1">
<div>+</div>
<div>
<h2>Exploring your Motivations to Quit Tobacco</h2>
</div>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>What to expect over time.</h2>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>Getting Ready: Strategies to conquer urges & set a quit date</h2>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>Quitting tobacco with medications</h2>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>Dealing with depression or stress</h2>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>Avoiding weight gain or alcohol</h2>
</a>
<div>
</div>
</li>
<li>
<adata-parent="#accordion1">
<div>+</div>
<h2>Making your plan stick: relapse prevention</h2>
</a>
<div>
</div>
</li>
</ul>
</div>
</div>
</div>
与
https://github.com/a-jie/angular-infinite-list
