Question

我已创建自定义toogle script到show/hide内容。

目前当你先点击第二个文字时，图标机制工作正常。但是当您单击第一个文本并再次单击第一个图标机制不起作用时。

我的JS代码：

$(document).ready(function() {

    $('.togglelink').on('click', function(e) {
        e.preventDefault();
        var elem = $(this).next('.toggle');

        $('.toggle').not(elem).hide('fast');
        elem.slideToggle('fast');

        if (elem.is(':visible')) {
            var openslide = $(this).attr("id");

            if (openslide == 'slideNavToggle') {
                $("#where-slide-down").hide();
                $("#where-slide-up").show();

                $("#inspiration-slide-down").show();
                $("#inspiration-slide-up").hide();
                $("#need-slide-down").show();
                $("#need-slide-up").hide();
            }

            if (openslide == 'slideInspToggle') {
                $("#inspiration-slide-down").hide();
                $("#inspiration-slide-up").show();

                $("#where-slide-down").show();
                $("#where-slide-up").hide();
                $("#need-slide-down").show();
                $("#need-slide-up").hide();
            }

            if (openslide == 'slideToggle') {
                $("#need-slide-down").hide();
                $("#need-slide-up").show();

                $("#where-slide-down").show();
                $("#where-slide-up").hide();
                $("#inspiration-slide-down").show();
                $("#inspiration-slide-up").hide();
            }

        }
    });
    $('.toggle').hide('fast');
});

我的小提琴：Sample

有任何想法或建议吗？感谢。

Answer 1

你走了：你只需要从show / hide更改为toggle。 Fiddle

$('.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle');

$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');

if (elem.is(':visible')) {
    var openslide = $(this).attr("id");

    if (openslide == 'slideNavToggle') {
        $("#where-slide-down").toggle();
        $("#where-slide-up").toggle();

        $("#inspiration-slide-down").show();
        $("#inspiration-slide-up").hide();
        $("#need-slide-down").show();
        $("#need-slide-up").hide();
    }

    if (openslide == 'slideInspToggle') {
        $("#inspiration-slide-down").toggle();
        $("#inspiration-slide-up").toggle();

        $("#where-slide-down").show();
        $("#where-slide-up").hide();
        $("#need-slide-down").show();
        $("#need-slide-up").hide();
    }

    if (openslide == 'slideToggle') {
        $("#need-slide-down").toggle();
        $("#need-slide-up").toggle();

        $("#where-slide-down").show();
        $("#where-slide-up").hide();
        $("#inspiration-slide-down").show();
        $("#inspiration-slide-up").hide();
    }

}
});

$('.toggle').hide('fast');

jQuery显示带切换事件的图标

1 个答案: