在切换 DIV 的同时切换 up/down 图标

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

在切换 DIV 的同时切换 up/down 图标

Toggle up/down icons while toggling a DIV

javascript

jquery

twitter-bootstrap-3