jquery - 展开菜单时添加减号 (-)，收缩时添加 (+)

Question

我试图在菜单展开和收缩时切换-和+ 。我可以选择添加和删除以图像为背景的类，但我决定使用-和+作为 html。我正在采取的方法是.remove()and <span class="plus">with.append()但<span class="minus">我被困在那里。这是我的小提琴。谢谢。

Answer 1

尝试这个

$("#vertical-menu h3").click(function () {
    //slide up all the link lists
    $("#vertical-menu ul ul").slideUp();
    $('.plus',this).html('+');
    //slide down the link list below the h3 clicked - only if its closed
    if (!$(this).next().is(":visible")) {
        $(this).next().slideDown();
        $('.plus').html('+');
        $('.plus',this).html('-');
    }
})

Js 小提琴演示

Answer 2

<script type="text/javascript">
$(document).ready(function () {

$('.navbar .dropdown-item').on('click', function (e) {
    var $el = $(this).children('.dropdown-toggle');
    var $parent = $el.offsetParent(".dropdown-menu");
    $(this).parent("li").toggleClass('open');

    if (!$parent.parent().hasClass('navbar-nav')) {
        if ($parent.hasClass('show')) {
            $parent.removeClass('show');
            $el.next().removeClass('show');
            $el.next().css({"top": -999, "left": -999});
        } else {
            $parent.parent().find('.show').removeClass('show');
            $parent.addClass('show');
            $el.next().addClass('show');
            $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
        }
        e.preventDefault();
        e.stopPropagation();
    }
});

$('.navbar .dropdown').on('hidden.bs.dropdown', function () {
    $(this).find('li.dropdown').removeClass('show open');
    $(this).find('ul.dropdown-menu').removeClass('show open');
});

});

Answer 3

工作示例（不要关闭所有幻灯片，为此我建议您使用 Jquery UI 的手风琴功能）

$("#vertical-menu h3").click(function () {
    //Inner 
    var jqInner = $(this).next();
    if (jqInner.is(":visible"))
    {
        jqInner.slideUp()
        $(this).find('span').html('-');
    }
    else
    {
        jqInner.slideDown()
        $(this).find('span').html('+');
    }
})

http://jsfiddle.net/22ZyM/4/