javascript - 带有下拉手风琴剪贴文本的画布外导航

Question

我正在使用 Foundation v5.5 并结合了两个 不同的 js 代码来创建一个可用的带有下拉手风琴的画布顶部导航。

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 don't know enough JS to add 100px to the height of .offcanvas-最佳。想法？

这是我的codepen和有问题的 js 的链接（我使用的是 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()'s 的目的。

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

我将 CSS 更改为.o-content：

CSS

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