目前，我可以show/hide使用slideToggle()方法$(document).ready(function() {
$(".txtEachCaracteristica").css('display', 'none');
$(".txtTituCaracteristica, .arrowBlack").click(function(ev) {
$(this).next(".txtEachCaracteristica").slideToggle('slow');
});
});我想要的文字。
现在我一直在尝试点击时，我也可以在每次点击时更改另一张图片。
body {
font-family: 'Montserrat', sans-serif;
}
.txtTituCaracteristica {
line-height: 2;
font-weight: 600;
font-size: 15pt;
}
.icon-more {
height: 18px;
}
p {
display: inline;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<br />
<div id="titu1" class="txtTituCaracteristica">
<p>Living</p> <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png" />
</div>
<div id="txt1" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br>
<div id="titu2" class="txtTituCaracteristica">Hab <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png" /></div>
<div id="txt2" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br>
<img class="icon-more" src="https://png.icons8.com/ios-glyphs/1600/minus-math.png" />class ViewController: UIViewController, UITextFieldDelegate {
@IBOutlet weak var priceTextField: UITextField!
@IBOutlet weak var payoutTextField: UITextField!
@IBOutlet weak var leasingPeriodTextField: UITextField!
@IBOutlet weak var priceLabel: UILabel!
@IBOutlet weak var payoutLabel: UILabel!
var amt: Int = 0
override func viewDidLoad() {
super.viewDidLoad()
priceTextField.delegate = self
priceTextField.delegate = self
priceTextField.placeholder = updateAmount()
}
func priceTextFieldShouldReturn(_ priceTextField: UITextField) -> Bool {
self.view.endEditing(true)
return true
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
答案 0 :(得分：2)
假设＆＃39;图像＆＃39;你的意思是加号/减号图标，然后通过在点击的元素上切换一个CSS类来修改它们会容易得多，这个元素在子:after的{{1}}伪元素中定义它们，就像这样：
span$(".txtTituCaracteristica").click(function(ev) {
$(this).toggleClass('open').next(".txtEachCaracteristica").slideToggle('slow');
});body {
font-family: 'Montserrat', sans-serif;
}
.txtTituCaracteristica {
line-height: 2;
font-weight: 600;
font-size: 15pt;
}
.txtTituCaracteristica span {
position: relative;
}
.txtTituCaracteristica span:after {
content: '';
position: absolute;
background-image: url('https://png.icons8.com/metro/1600/plus-math.png');
background-size: cover;
height: 18px;
width: 18px;
top: 3px;
right: -25px;
}
.txtTituCaracteristica.open span:after {
background-image: url('https://png.icons8.com/metro/1600/minus-math.png');
}
.txtEachCaracteristica {
display: none;
}
.icon-more {
height: 18px;
}
p {
display: inline;
}
答案 1 :(得分：1)
我假设您想要更改的图像是正/负图标......
诀窍是检查src属性值并将其更改为另一个。
$(document).ready(function() {
$(".txtEachCaracteristica").css('display', 'none');
$(".txtTituCaracteristica, .arrowBlack").click(function(ev) {
$(this).next(".txtEachCaracteristica").slideToggle('slow');
// Change the icon
var icon = $(this).find(".icon-more");
if(icon.attr("src")=="https://png.icons8.com/ios-glyphs/1600/minus-math.png"){
icon.attr("src","https://png.icons8.com/metro/1600/plus-math.png");
}else{
icon.attr("src","https://png.icons8.com/ios-glyphs/1600/minus-math.png");
}
});
});body {
font-family: 'Montserrat', sans-serif;
}
.txtTituCaracteristica {line-height: 2; font-weight: 600;font-size: 15pt;}
.icon-more{height: 18px;}
p {display: inline;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<br />
<div id="titu1" class="txtTituCaracteristica">
<p>Living</p> <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png"/>
</div>
<div id="txt1" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br>
<div id="titu2" class="txtTituCaracteristica">Hab <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png"/></div>
<div id="txt2" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br>
<img class="icon-more" src="https://png.icons8.com/ios-glyphs/1600/minus-math.png"/>
答案 2 :(得分：-1)
将以下代码添加到您的点击功能中：
let image = $(this).find('img')
image.attr('src','https://png.icons8.com/ios-glyphs/1600/minus-math.png"/')
$(document).ready(function() {
$(".txtEachCaracteristica").css('display', 'none');
$(".txtTituCaracteristica, .arrowBlack").click(function(ev) {
$(this).next(".txtEachCaracteristica").slideToggle('slow');
let expanded = $(this).attr("aria-expanded") === 'true'
let imgSrc = expanded == true ? 'https://png.icons8.com/metro/1600/plus-math.png"/' : 'https://png.icons8.com/ios-glyphs/1600/minus-math.png"/'
let image = $(this).find('img')
image.attr('src',imgSrc)
$(this).attr("aria-expanded", !expanded)
})
});body {
font-family: 'Montserrat', sans-serif;
}
.txtTituCaracteristica {line-height: 2; font-weight: 600;font-size: 15pt;}
.icon-more{height: 18px;}
p {display: inline;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<br />
<div id="titu1" class="txtTituCaracteristica" aria-expanded='false'>
<p>Living</p> <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png"/>
</div>
<div id="txt1" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br>
<div id="titu2" class="txtTituCaracteristica">Hab <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png"/></div>
<div id="txt2" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br>
<img class="icon-more" src="https://png.icons8.com/ios-glyphs/1600/minus-math.png"/>
UPD：刚刚将aria-expanded attr添加到html元素和一些逻辑以切换图标