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の問題ではありません。

アンカータグ内の疑似要素の高さは、ホバー状態でない場合は80ピクセルです。高さと位置を調整することで、これを並べ替えることができます。

しかし、あなたはそれを削除するために、あなたはあなたのCSSの:beforeと:afterスタイル定義を離れ削除、またはnoneに自分のcontentプロパティを設定することができます。これにより、レンダリングがまったくできなくなります。

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