1

私はFoundation v5.5を使用しており、2つの 異なるjsコードを組み合わせて、ドロップダウンアコーディオンを備えた使用可能なオフキャンバストップナビゲーションを作成しています.

ただし、ドロップダウン アコーディオンのいずれかが選択されている場合、.offcanvas-top クラスの高さが JS によって指定されているため、テキストが切り取られています。上。考え？

これが私のコードペンと問題のjsへのリンクです（私はWordPressを使用しているため、noConflictです）：

//offcanvas dropdown accordions
var $s = jQuery.noConflict();
    $s(".off-canvas-submenu").hide();
    $s(".off-canvas-submenu-call").click(function() {
         var icon = $s(this).parent().next(".off-canvas-submenu").is(':visible') ? '+' : '-';
         $s(this).parent().next(".off-canvas-submenu").slideToggle('fast');
         $s(this).find("span").text(icon);
    });

//Offcanvas menu
(function(w){
     var $z = jQuery.noConflict();
      var $container = $z('.offcanvas-top'),
                $cHeight = $z('.o-content').outerHeight();
            $z(document).ready(function() {
                buildCanvas();
            });

            function buildCanvas() {
                $z('<a class="blue_bg button" href="#" id="trigger">Explore KSAS +</a>').appendTo($container);

                $z('#trigger').bind('click', function(e) {
                    e.preventDefault();
                    var $this = $z(this);
                    $container.toggleClass('active');
                    if($container.hasClass('active')) {
                        $container.height($cHeight);
                        $this.text('Hide -');
                    } else {
                        $container.height(50);
                        $this.text('Explore KSAS +');
                    }
                });

            }

            $z(window).resize(function() { //On Window resizeBy(
                $cHeight = $z('.o-content').outerHeight();
        console.log($cHeight);
            });


        })(this);

以下に問題のスクリーンショットを示します。

前： キャンバス外トップ ナビゲーションのデフォルト状態

アクティブなアコーディオンから切り取られたテキスト: アコーディオンが折りたたまれたキャンバス外のトップ ナビゲーション

4

1 に答える 1