Question

我有一个简单的导航菜单，每个项目有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>

Answer 1

您有多个具有相同ID（项目）的元素，这对HTML不正确并使jQuery混淆。

我建议使用特殊类更改项目ID，例如，项目菜单，然后将jQuery代码调整为$（'。project-menu'）。

Answer 2

您不应该有重复的ID。请改用一个班级，这样您就可以class="project"代替id="project"。

如果您确实想要重复ID，请更改您的选择器从

$('#project')...

要

$('[id="project"]')...

这是因为#id只找到页面中的第一个（因为它假定只有一个），但[id='id']搜索所有匹配。

希望这会有所帮助。干杯

在jQuery中切换多个下拉菜单

2 个答案: