JQuery切換刪除

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僞元素在未處於懸停狀態時的高度爲80像素。你可以通過調整它的高度和位置來排序。

但既然你想刪除它，你可以在你的CSS刪除掉:before和:after樣式定義，或者他們content屬性設置爲none。這將阻止它們渲染。

#cssmenu > ul > li.has-sub > a:before, 
#cssmenu > ul > li.has-sub > a:after { 
    content: none; 
}