我有两个列表,我希望其功能类似于手风琴,当点击指定的元素时,指定的列表会被隐藏,再次点击它会切换到显示。
HTML:
<ul class="acc" id="acc">
<li>
<h3 class="slide">CATEGORIES</h3>
<div class="acc-section">
<div class="acc-content view">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</li>
<li>
<h3 class="slide2">CATEGORIES</h3>
<div class="acc-section">
<div class="acc-content view2">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</li>
</ul>
我使用以下代码为两个列表完成了此操作:
$(document).ready(function() {
$('h3.slide').toggle(function() {
$('div.view').fadeOut('slow');
return false;
},
function() {
$('div.view').fadeIn('slow');
return false;
});
$('h3.slide2').toggle(function() {
$('div.view2').fadeOut('slow');
return false;
},
function() {
$('div.view2').fadeIn('slow');
return false;
});
});
我的问题是它不是“动态的”,如果我将来添加另一个列表,那么我还需要上面的代码。我希望能够只使用一小段代码并为clickable元素和show / hide元素重用相同的两个类名。我尝试使用以下代码完成此操作,但无法使其正常工作:
$(document).ready(function() {
$('h3.slide').toggle(function() {
$(this).siblings('div.view').fadeOut('slow');
return false;
},
function() {
$(this).siblings('div.view').fadeIn('slow');
return false;
});
});
任何提示?
答案 0 :(得分:0)
要将事件应用于需要在最初加载DOM之后加载的元素,请尝试jQuery on()函数。类似的东西:
$(function(){
$('h3.slide').on('toggle', function() {
$('div.view').fadeOut('slow');
return false;
},
function() {
$('div.view').fadeIn('slow');
return false;
});
$('h3.slide2').on('toggle', function() {
$('div.view2').fadeOut('slow');
return false;
},
function() {
$('div.view2').fadeIn('slow');
return false;
});
});
希望有所帮助。
答案 1 :(得分:0)
你可以在这里使用jquery“最近”而不是兄弟姐妹。 http://api.jquery.com/closest/
例如:
$(this).closest('div.view').fadeOut('slow');
如果这不符合您的需求,请发布您的CSS,我可以帮助您更好。
答案 2 :(得分:0)
感谢您的努力,但我能够使用.slideToggle解决此问题:http://api.jquery.com/slideToggle/