javascript - 展开子菜单条件 (jQuery)

Question

我遇到了一个无法解决的 jQuery 问题。我创建了一个带有子菜单元素的菜单。我想通过单击菜单项来切换内容的高度。问题是当我点击其他项目时，内容会崩溃。解释起来有点棘手，我已经放了两个网站来完成这项工作 http://www.polerstuff.com/ -> 当您点击“商店”，然后点击“信息”时，子菜单保持打开状态。这里也看到了同样的技巧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 版本，它使用 data 属性来定位具有所需内容的 div，以及另一个包含所需动画高度的数据标签(但还有许多其他方法)。单击同一按钮可将其关闭，这是通过添加指示性类来实现的。“隐藏”div 可以根据需要包含更多带有类和布局的 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>