Javascript 带下拉式手风琴剪裁文本的非画布导航

我使用基础V5.5和组合JS代码创建一个可用下拉手风琴的帆布顶部导航。

但是，当选择任何一个下拉式手风琴时，文本会被剪裁，因为.offcanvas top类的高度是由JS指定的，我只是不知道有足够的JS将.offcanvas top的高度增加100px。想法

这里有一个指向我的和有问题的js的链接（我使用的是WordPress，因此是noConflict）：

//非画布下拉式手风琴
var$s=jQuery.noConflict（）；
$s（“.off canvas子菜单”）.hide（）；
$s（“.off canvas子菜单调用”）。单击（function（）{
var icon=$s（this）.parent（）.next（“.off canvas子菜单”）.is（“：visible”）？“+”：“-”；
$s（this）.parent（）.next（“.off canvas子菜单”）.slideToggle（'fast'）；
$s（this.find（“span”）.text（图标）；
});
//非画布菜单
（功能（w）{
var$z=jQuery.noConflict（）；
var$container=$z（'.offcanvas-top'），
$cHeight=$z（'.o-content'）.outerHeight（）；
$z（文档）.ready（函数（）{
buildCanvas（）；
});
函数buildCanvas（）{
$z（''）。附于（$container）；
$z（“#触发器”）.bind（'click'，函数（e）{
e、 预防默认值（）；
var$this=$z（this）；
$container.toggleClass（'active'）；
if（$container.hasClass（'active'））{
$container.height（$cHeight）；
$this.text（'Hide-'）；
}否则{
$集装箱高度（50）；
$this.text（'Explore KSAS+'）；
}
});
}
$z（window）.resize（函数（）{//On window resizeBy(
$cHeight=$z（'.o-content'）.outerHeight（）；
控制台日志（$cHeight）；
});
})（本条）；

下面是问题的屏幕截图：

之前：

从活动手风琴剪辑的文本：

---

以下内容将使您接近。我将所有内容合并到函数中，因为我没有看到多个

noConflict（）

的用途

JS

//Offcanvas菜单
（功能（w）{
var$z=jQuery.noConflict（）；
var$container=$z（'.offcanvas-top'）；
var$cHeightMax=$z（'.o-content'）.outerHeight（）；
console.log（$cHeightMax）；
$z（“.off canvas子菜单”）.hide（）；
var$cHeightMin=$z（'.o-content'）.outerHeight（）；
console.log（$cHeightMin）；
$z（文档）.ready（函数（）{
buildCanvas（）；
});
函数buildCanvas（）{
$z（“.off canvas子菜单调用”）。单击（function（）{
var icon=$z（this）.parent（）.next（“.off canvas子菜单”）.is（“：visible”）？“+”：“-”；
var$subMenu=$z（this.parent（）.next（“.off canvas subMenu”）；
$z（this.find（“span”）.text（图标）；
如果（$subMenu.css（'display'）='none'）{
$container.height（$cHeightMax）；
$subMenu.slideToggle（'fast'）；
}否则{
$container.height（$cHeightMin）；
$subMenu.slideToggle（'fast'）；
}
});
$z（''）。附于（$container）；
$z（“#触发器”）.bind（'click'，函数（e）{
e、 预防默认值（）；
var$this=$z（this）；
$container.toggleClass（'active'）；
if（$container.hasClass（'active'））{
$container.height（$cHeightMin）；
$z（'.o-content'）.show（）；
$this.text（'Hide-'）；
}否则{
$集装箱高度（50）；
$z（'.o-content'）.hide（）；
$this.text（'Explore KSAS+'）；
$z（“.off canvas子菜单”）.hide（）；
$z（“.off canvas子菜单调用span”）.text（“+”）；
}
});
}
$z（window）.resize（函数（）{//On window resizeBy(
$cHeight=$z（'.o-content'）.outerHeight（）；
控制台日志（$cHeight）；
});
})（本条）；

我将

.o-content

的CSS更改为：

CSS

.o-content{
宽度：100%；
位置：绝对位置；
填料：1米1米2.5米；
显示：无；
}

这个问题应该也发生在CodePen中吗？我没有在Chrome中看到这个问题，但是你的画笔缺少屏幕截图中明显的项目。请在CodePen上复制这个问题。希望画笔尽可能简单，但添加了尽可能多的附加标记以最好地完全复制这个问题。请参阅：这很有效非常感谢！这是给感兴趣的人的建议

//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);