Question

当菜单展开和缩小时，我正在尝试切换 - 和 + 。我可以选择添加和删除带有图像作为背景的类，但我决定使用 - 和 + 作为html。我采取的方法是.remove() <span class="plus">和.append()与<span class="minus">，但我被困在那里。的 This is my fiddle 即可。感谢。

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 Fiddle Demo

Answer 2

工作样本（不要关闭所有幻灯片，为此我建议您使用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/

Answer 3

<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');
});

});

有关完整菜单的信息，请参见

http://blog.adlivetech.com/how-to-make-vertical-menu-with-plus-minus-toggle/

扩展菜单时添加减号（ - ），收缩时加上（+）

3 个答案: