javascript - 切换 DIV 时向上/向下切换图标

Question

这让我抓狂，不知道为什么，但我无法显示 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);
    });
});

Answer 1

您在使用 .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 。如果您有任何后续问题，请告诉我。