这让我抓狂,不知道为什么,但我无法显示 DIV。还有一个图标,无法正确触发,请参阅此处:Fiddle
HTML:
<input type="radio" id="cert-specify1" name="standard-specify">
<label class="label-inline toggle-survey-specify" for="cert-specify1"><span></span>Specify Survey(s)</label>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: inline;"></span>
<span class="glyphicon glyphicon-chevron-down" style="display: none;"></span>
<div class="survey-specify hidden-div">
<select multiple="multiple">
<option>Prior Survey - 1</option>
<option>Prior Survey - 2</option>
<option>Prior Survey - 3</option>
</select>
</div>
脚本:
$(document).ready(function () {
$('.toggle-survey-specify').on('click', function() {
$(this).next('.survey-specify').toggleClass('hidden-div');
$(this).next('span').slideToggle(0);
});
});
最佳答案
您在使用 .next()
时犯了一个小错误,因为它不是下一个元素。通过使用 .parent()
和 .find()
/.children()
你将能够解决这个问题:
$(document).ready(function () {
$('.toggle-survey-specify').on('click', function() {
$(this).parent().find('.survey-specify').toggleClass('hidden-div');
$(this).next('span').slideToggle(0);
});
});
或者您可以使用.next().next().next()
除此之外,您还使用了 slideToggle(0)
,它表示它应该在 0 秒内生成动画。一个简单的 toggle()
就可以了。
对于不起作用的图标,您不会设置其他图标的动画来显示。
我改变了你的 fiddle 。如果您有任何后续问题,请告诉我。
关于javascript - 切换 DIV 时向上/向下切换图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28071868/