jquery toggle accordian without plugin
嗨有两个内容部分，我一次只想打开1个。它们都会在点击标题时崩溃并打开。我现在正在使用它们彼此独立的地方但是我希望它们在显示时隐藏另一个。我不想使用jquery手风琴的插件。
这是我现在的代码：
HTML：
<div class="topCats">
<h4><a href="#" class="openBox">Most Searched Categories</a></h4>
</div>
<div id="topCatsContainer">
content 1
</div>
<div class="allCats">
<h4><a href="#" class="closed">All Categories</a></h4>
</div>
<div id="allCatsContainer">
content 2
</div>
$('#allCatsContainer').css("display", "none");
$('.topCats h4 a').click( function() {
$('#topCatsContainer').slideToggle(500);
$(this).toggleClass("openBox");
});
$('.allCats h4 a').click( function() {
$('#allCatsContainer').slideToggle(500);
$(this).toggleClass("openBox");
});
没有找到相关结果
已邀请:
2 个回复
苛肠倒俱
<div class="topCats"> <h4><a href="#" class="openBox">Most Searched Categories</a></h4> </div> <div id="topCatsContainer" class="accordianContent"> content 1 </div> <div class="allCats"> <h4><a href="#" class="closed">All Categories</a></h4> </div> <div id="allCatsContainer" class="accordianContent"> content 2 </div>$('#allCatsContainer').css("display", "none"); $('.topCats h4 a, .allCats h4 a').click(function() { var content = $(this).parent().parent().next(); if(content.is(':visible')) { content .slideUp(500) .addClass('closed') .removeClass('openBox'); } else { content .parent() .find('.accordianContent:visible') .slideUp(500) .addClass('closed') .removeClass('openBox'); content.slideDown(500).removeClass('closed').addClass('openBox'); } });和类，这可能是多余的，但我不确定你的造型是否依赖它。 一般来说，这个功能可以通过多种方式实现，如果你愿意改变你的HTML，我们可以让JS方面看起来更具代表性:)否则你可以使用这个实现并避免任何造型问题。靛取糕奖穿
$('yourdivs').click( function() { $("yourdivs").slideUp(); $(this).slideDown(); });和之间没有直接联系。这真的很难看，但以下作品http://jsfiddle.net/mrtsherman/MPwQ8/3/$('#allCatsContainer').css("display", "none"); $('.topCats h4 a').click( function() { $('#topCatsContainer').slideToggle(500); $('#allCatsContainer').slideToggle(500); $(this).toggleClass("openBox"); }); $('.allCats h4 a').click( function() { $('#allCatsContainer').slideToggle(500); $('#topCatsContainer').slideToggle(500); $(this).toggleClass("openBox"); });