Question

我遇到了一个我无法解决的jQuery问题。我创建了一个带有子菜单元素的菜单。我想通过单击菜单项来切换内容的高度。事情就是当我点击其他项目时，内容崩溃了。有点难以解释，我已经把两个网站做了这个工作 http://www.polerstuff.com/ - ＆gt;点击＆＃39; shop＆＃39;然后在＆＃39; info＆＃39;上，子菜单保持打开状态。在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 - ＆GT;非常感谢提前。

Answer 1

这是你的小提琴的版本，它使用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>

展开子菜单条件（jQuery）

1 个答案: