Question

我正在建立一个网站，并使用模板创建一个菜单栏。菜单包括+和 - 图标，当子菜单打开和关闭时切换。

菜单本身可以完美运行，但这些看起来来自JQuery库或类似内容的图标无法正确呈现。

有人可以解释如何删除它们吗？

下面是JQuery代码，但要看到它完全呈现了JSFiddle链接。

See the JSFiddle here更好地理解我在说什么。您可能需要放大浏览器窗口才能看到完整大小的菜单。

(function ($) {
    $.fn.menumaker = function (options) {
        var cssmenu = $(this),
        settings = $.extend({
                format: "dropdown",
                sticky: false
            }, options);
        return this.each(function () {
            $(this).find(".button").on('click', function () {
                $(this).toggleClass('menu-opened');
                var mainmenu = $(this).next('ul');
                if (mainmenu.hasClass('open')) {
                    mainmenu.slideToggle().removeClass('open');
                } else {
                    mainmenu.slideToggle().addClass('open');
                    if (settings.format === "dropdown") {
                        mainmenu.find('ul').show();
                    }
                }
            });
            cssmenu.find('li ul').parent().addClass('has-sub');
            multiTg = function () {
                cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
                cssmenu.find('.submenu-button').on('click', function () {
                    $(this).toggleClass('submenu-opened');
                    if ($(this).siblings('ul').hasClass('open')) {
                        $(this).siblings('ul').removeClass('open').slideToggle();
                    } else {
                        $(this).siblings('ul').addClass('open').slideToggle();
                    }
                });
            };
            if (settings.format === 'multitoggle')
                multiTg();
            else
                cssmenu.addClass('dropdown');
            if (settings.sticky === true)
                cssmenu.css('position', 'fixed');
            resizeFix = function () {
                var mediasize = 700;
                if ($(window).width() > mediasize) {
                    cssmenu.find('ul').show();
                }
                if ($(window).width() <= mediasize) {
                    cssmenu.find('ul').hide().removeClass('open');
                }
            };
            resizeFix();
            return $(window).on('resize', resizeFix);
        });
    };
})(jQuery);

(function ($) {
    $(document).ready(function () {
        $("#cssmenu").menumaker({
            format: "multitoggle"
        });
    });
})(jQuery);

谢谢大家！

Answer 1

这是一个CSS问题，而不是js库：

#cssmenu > ul > li.has-sub > a:after{
  position:absolute;
  top:17px;
  right:11px;
  width:8px;
  height:2px;
  display:block;
  background:#ddd;
  content:''
}

#cssmenu > ul > li.has-sub > a:before{
  position:absolute;
  top:14px;
  right:14px;
  display:block;
  width:2px;
  height:8px;
  background:#ddd;content:'';
  -webkit-transition:all .25s ease;
  -ms-transition:all .25s ease;
  transition:all .25s ease
}

https://jsfiddle.net/HappyiPhone/wn1kykbh/5/

Answer 2

由于这些属性，您需要使用height值和位置（left, bottom, right, top）来正确放置它们：

#cssmenu > ul > li.has-sub > a:after{
  position:absolute;
  top:17px;
  right:11px;
  width:8px;
  height:2px;
  display:block;
  background:#ddd;
  content:''
}

#cssmenu > ul > li.has-sub > a:before{
  position:absolute;
  top:13px;
  right:14px;
  display:block;
  width:2px;
  height:10px;
  background:#ddd;content:'';
  -webkit-transition:all .25s ease;
  -ms-transition:all .25s ease;
  transition:all .25s ease
}

See this fiddle

Answer 3

正如先前的答案已经陈述的那样，这是一个CSS问题，而不是jQuery问题。

当不处于悬停状态时，锚标记内的:before伪元素的高度为80px。您可以通过调整其高度和位置对其进行排序。

但是，由于您要将其删除，因此您可以删除CSS上的:after和content样式定义，或将其none属性设置为#cssmenu > ul > li.has-sub > a:before, #cssmenu > ul > li.has-sub > a:after { content: none; }。这将阻止它们呈现。

actual = np.array(test['Target_Column'])

JQuery切换删除

3 个答案: