gpt4 book ai didi

javascript - 如何添加一个文本链接到这个 jQuery 切换

转载 作者:行者123 更新时间:2023-11-30 17:13:58 25 4
gpt4 key购买 nike

我有一个看起来像按钮的 jQuery 切换链接。当用户按下时,它会切换并显示下面的 div

现在我想在链接旁边添加一些文本,如“更多”,其作用与按下链接时相同——按下一次显示内容,再次按下时隐藏内容。同时我想保留第一个链接的原始功能。

我已经尝试了几种可能性,但无法使其正常工作,任何建议将不胜感激。

这是函数:

$(document).ready(function(){

$(".slidingDiv").hide();
$(".show_hide_search").show();

$('.show_hide_search').on('click', function(e){
e.preventDefault();

var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$(self).text(function(_,txt) {
return txt == "–" ? "+" : "–";
});
});
});
});

这是 HTML:

<div>
<a href="#" class="show_hide_search" id="plus">+</a>
<div style="margin-left:30px;" class="show_hide_search2">More</div>
</div>

这是一个完整的测试:

$(document).ready(function(){

$(".slidingDiv").hide();
$(".show_hide_search").show();

$('.show_hide_search').on('click', function(e){
e.preventDefault();

var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$(self).text(function(_,txt) {
return txt == "–" ? "+" : "–";
});
});
});
});
.show_hide_search {
font: bold 14px Arial;
text-decoration: none;
background-color: orange;
color: #FFFFFF;
padding: 2px 6px 1px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href="#" class="show_hide_search" id="plus">+</a>
<div style="margin-left:30px;" class="show_hide_search2">More</div>
</div>

<div class="slidingDiv" style="display: block;">
<h2>Content One</h2>
</div>

<div>
<a href="#" class="show_hide_search" id="plus">+</a>
<div style=" margin-left:30px;" class="show_hide_search2">More</div>
</div>

<div class="slidingDiv" style="display: block;">
<h2>Content Two</h2>
</div>

最佳答案

只需将 onclick 监听器添加到容器即可。

$(document).ready(function(){

$(".slidingDiv").hide();
$(".show_hide_search").show();

$('.show_hide_toggle').on('click', function(e){
e.preventDefault();

var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$($(self).children()[0]).text(function(_,txt) {
return txt == "–" ? "+" : "–";
});
});
});
});

在这里查看:JSFiddle

关于javascript - 如何添加一个文本链接到这个 jQuery 切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26470961/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com