[英]Toggle up and down arrows as images
I have two images of arrows, up and down.我有两个箭头图像,向上和向下。 My problem is when I use slideToggle(), it toggles up and down, but the image stays the same rather then changing.
我的问题是当我使用 slideToggle() 时,它会上下切换,但图像保持不变而不是改变。 For instance, if I toggle up, the image should automatically change to the downward arrow and vice versa.
例如,如果我向上切换,图像应自动更改为向下箭头,反之亦然。 Also, these arrows should be moved to the top of the page once the toggle happens.
此外,一旦切换发生,这些箭头应移至页面顶部。 The current code displays two arrows, I would like that to be one arrow that changes based on the toggle.
当前代码显示两个箭头,我希望它是一个根据切换而改变的箭头。
What I have so far..到目前为止我所拥有的..
HTML: HTML:
<div id="toggleParam">
<input type="image" class="upArrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
<input type="image" class="downArrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
</div>
CSS: CSS:
.upArrow{
display: block;
margin-left: 690px;
margin-top: 0px;
border-width: 5px;
padding-bottom: 0px;
cursor: pointer;
height: 7pt;
}
.downArrow{
display: block;
margin-left: 760px;
margin-right: 70px;
margin-top: -10px;
border-width: 5px;
padding-bottom: 0px;
cursor: pointer;
height: 7.5pt;
}
JavaScript/JQuery: JavaScript/JQuery:
$(document).ready(function () {
$('#toggleParam').on("click", function () {
$('.dropdown').slideToggle();
});
What I need is shown in these two pictures..我需要的显示在这两张图片中..
I realize missing a lot of code on the JS part.. I am working on it while asking this question.我意识到在 JS 部分遗漏了很多代码。我在问这个问题时正在研究它。 Thanks for the help!
谢谢您的帮助!
You need to simply include the arrows' elements in the toggle function accordingly:您只需要相应地在切换功能中包含箭头元素:
$('#toggleParam').on("click", function () {
$('.downArrow, .upArrow').toggle();
$('.dropdown').slideToggle();
});
Also in the beginning you need to hide one of the arrows (not sure which one in your case):同样在开始时,您需要隐藏其中一个箭头(不确定您的情况是哪一个):
.downArrow{
display: none;
...
.upArrow{
display: block;
Try this (note - there's n-ways to do this; this is just how i'd do it).试试这个(注意 - 有 n 种方法可以做到这一点;这就是我要做的)。
<!--index.html-->
<div id="toggleParam" class="toggle-param--up">
<input type="image" class="up-arrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
<input type="image" class="down-arrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
</div>
/* app.css */
.toggle-param--up .down-arrow { display; none;}
.toggle-param--down .up-arrow { display; none;}
//app.js
$('#toggleParam').on("click", function (e) {
// the rest of your logic goes here....
var isUp = $(e.target).hasClass("toggle-param--up"),
directionClass = { true: "toggle-param--up", false: "toggle-param--down"};
$(e).target.removeClass(directionClass[isUp]).addClass(directionClass[!isUp];
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.