我遇到了一个无法解决的 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 -> 提前非常感谢。
最佳答案
这是您的 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>
关于javascript - 展开子菜单条件 (jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39583027/