Off-Canvas Nav with Dropdown Accordions Clipping Text

Question

我正在使用 Foundation v5.5 并结合 two different js 代码来创建一个可用的关闭-canvas 带有下拉手风琴的顶部导航。

However, when any of the dropdown accordions are selected, the text is being clipped because the .offcanvas-top class's height is being specified by the JS, and I simply不知道足够的 JS 将 100px 添加到 .offcanvas-top 的高度。想法？

这是我的 codepen 和有问题的 js 的 link（我使用的是 WordPress，因此没有冲突）：

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

问题截图如下：

之前：

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

Answer 1

以下内容将使您接近。我把它全部组合成函数，因为我没有看到多个 noConflict() 的目的。

JS

//Offcanvas menu
(function(w) {
  var $z = jQuery.noConflict();
  var $container = $z('.offcanvas-top');
  var $cHeightMax = $z('.o-content').outerHeight();
  console.log($cHeightMax);
  $z(".off-canvas-submenu").hide();
  var $cHeightMin = $z('.o-content').outerHeight();
  console.log($cHeightMin);
  $z(document).ready(function() {
    buildCanvas();
  });

  function buildCanvas() {
    $z(".off-canvas-submenu-call").click(function() {
      var icon = $z(this).parent().next(".off-canvas-submenu").is(':visible') ? '+' : '-';
      var $subMenu = $z(this).parent().next(".off-canvas-submenu");
      
      $z(this).find("span").text(icon);
      
      if ($subMenu.css('display') === 'none') {
        $container.height($cHeightMax);
        $subMenu.slideToggle('fast');
      } else {
        $container.height($cHeightMin);
        $subMenu.slideToggle('fast');
      }
      
    });

    $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($cHeightMin);
       $z('.o-content').show();
        $this.text('Hide -');
      } else {
        $container.height(50);
        $z('.o-content').hide();
        $this.text('Explore KSAS +');
        $z(".off-canvas-submenu").hide();
        $z(".off-canvas-submenu-call span").text('+');
      }
    });

  }

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

})(this);

我把.o-content的CSS改成这样：

CSS

.o-content {
  width: 100%;
  position: absolute;
  padding: 1em 1em 2.5em;
  display: none;
}

Off-Canvas Nav with Dropdown Accordions Clipping Text

Off-Canvas Nav with Dropdown Accordions Clipping Text

javascript

jquery

zurb-foundation

off-canvas-menu

JS

CSS