展开子菜单条件(jQuery)

Unfold Submenu conditions (jQuery)

本文关键字：jQuery 条件 菜单      更新时间：2023-09-26

我遇到了一个无法解决的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"});
        }
     });
});
这是我的护照->提前感谢。

这是您的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>

相关文章：