gpt4 book ai didi

jquery - 在 jQuery toggle 中我想改变按钮的形状

转载 作者:行者123 更新时间:2023-11-28 12:37:55 25 4
gpt4 key购买 nike

我是 jQuery 的初学者。如何在向下滑动切换动画中更改我的 jQuery 按钮?

我可以在这个 html 代码中使用 css 编码的按钮吗,如果我可以请帮助我使用完全编码的 html

<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');

//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
//change the button label to be 'Show'
toggle_switch.html('Show');
}else{
//change the button label to be 'Hide'
toggle_switch.html('Hide');
}
});
});

});
</script>
<style>
.round-border {
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 10px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<section class="round-border">

<div>
<button href="#collapse1" class="nav-toggle">Show</button>
</div>
<div id="collapse1" style="display:none">
<p>Bla bla bla bla</p>
</div>
</section>
</body>
</html>

最佳答案

您可以使用 slideToggle 函数来显示和隐藏 div 以及更改类使用 toggleClass 函数<强> demo 你不能在按钮中有 href attr 但你可以使用 data attr

<button data-href="collapse1" class="nav-toggle">Show</button>
$(".nav-toggle") .click(function(){
$(this).toggleClass("active");
var h =$(this).data('href');
$("#"+h).slideToggle(300);
return false;
});

关于jquery - 在 jQuery toggle 中我想改变按钮的形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17873792/

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