在jQuery中切换多个下拉菜单
在jQuery中切换多个下拉菜单
提问于 2011-05-03 02:00:15
我有一个简单的导航菜单，每个项目都有5个子项目。我希望分项在页面加载时关闭。当页面加载时，只有第一个集合是关闭的。任何反馈都会非常有帮助。谢谢。
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$('#project').hide();
$('h5').click( function(){ $(this).toggleClass('closed').next('#project').slideToggle().siblings('#project').slideUp();
$(this).siblings('h5').removeClass('closed');
});
});
</script>下面是菜单代码的一部分：
<div id="sidebar_nav">
<h5>Education</h5>
<p id="project">
<a href="edu_project1.htm">project 1</a><br />
<a href="edu_project2.htm">project 2</a><br />
<a href="edu_project3.htm">project 3</a><br />
<a href="edu_project4.htm">project 4</a><br />
<a href="edu_project5.htm">project 5</a></p>
<h5>Health Care</h5>
<p id="project">
<a href="hc_project1.htm">project 1</a><br />
<a href="hc_project2.htm">project 2</a><br />
<a href="hc_project3.htm">project 3</a><br />
<a href="hc_project4.htm">project 4</a><br />
<a href="hc_project5.htm">project 5</a></p>
<h5>Housing</h5>
<p id="project">
<a href="hs_project1.htm">project 1</a><br />
<a href="hs_project2.htm">project 2</a><br />
<a href="hs_project3.htm">project 3</a><br />
<a href="hs_project4.htm">project 4</a><br />
<a href="hs_project5.htm">project 5</a></p>
</div>回答 2
Stack Overflow用户
发布于 2011-05-03 02:04:24
您有多个具有相同id (项目)的元素，这对于HTML是不正确的，并且使jQuery混淆。
我建议使用一个特殊的类来更改项目id，例如，project-menu，然后将jQuery代码调整为$('.project-menu')。
Stack Overflow用户
发布于 2011-05-03 02:07:10
您不应该有重复的ids。使用一个类来代替，这样你就可以用class="project"代替id="project"。
如果您真的想拥有重复的ids，请将选择器从
$('#project')...至
$('[id="project"]')...这是因为#id只查找页面中的第一个(因为它假定只有一个)，而[id='id']搜索所有匹配项。
希望这能有所帮助。干杯
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5860629
复制相关文章
相似问题
腾讯云开发者
