展开子菜单条件 (jQuery)

Question

我遇到了一个 jQuery 无法解决的问题。我创建了一个带有子菜单元素的菜单。我想通过单击菜单项来切换内容的高度。问题是当我点击其他项目时，内容崩溃了。解释起来有点棘手，我已经放了两个网站来完成这项工作 http://www.polerstuff.com/ -> When you click on 'shop' and then on 'info', the sub menu stays open. The same trick was seen here http://topodesigns.com/

我猜这两个网站都在使用 Shopify。

$(document).ready(function() {
    $(".button").on("click", function() {
        if($(".content").height() == 0) {
            $(".content").animate({height: "300px"});
        }
        else if($(".content").height() == 300) {
            $(".content").animate({height: "0px"});
        }
     });
});

这是我的 jsfiddle -> 非常感谢。

Answer 1

这是您的 fiddle 版本，它使用数据属性来定位具有所需内容的 div，以及另一个包含所需高度的数据标记以进行动画处理（但还有许多其他方法）。单击同一按钮将其关闭，这是通过添加指示性 class 来实现的。 'hiding' div 可能包含更多带有 classes 和布局的 div。

$(document).ready(function (){
    $(".b").on("click", function (){ 
    
      var $this = $(this),
       target = $this.data('target'),
          tall = $this.data('tall'),
          content = $(".content");
          
        target = $('.'+target).html(); // get the html content of target divs
        content.html(target); // insert said content
          
       if (!$this.hasClass('on')) {   // if it hasn't been clicked yet..
           $(".b").removeClass('on');  // say that none have been clicked
     $this.addClass('on');     // say that just this one has been clicked
           content.animate({height: tall}, 200); // animate to the height specified in this buttons data attribute
        } else {
           content.animate({height: "0px"});
     $this.removeClass('on');  
        }
    });
});

.content {
    background: coral;
    width: 100%;
    height: 0px;
    overflow:hidden;  
}

.hiding{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button class="b" data-target="alpha" data-tall="4em">Button</button>
<button class="b" data-target="bravo" data-tall="7em">Button</button>
<button class="b" data-target="charlie" data-tall="5em">Button</button>

<div class="content">Le contenu</div>

<div class="hiding alpha"> some stuff </div>
<div class="hiding bravo"> other things </div>
<div class="hiding charlie"> bits and pieces </div>

展开子菜单条件 (jQuery)

Unfold Submenu conditions (jQuery)

html

javascript

jquery

shopify