显示/隐藏 Div 消失问题。单击时辅助导航消失

Question

早上好， 我有一个显示/隐藏导航菜单，当单击第一项时，将生成第二个导航菜单，该菜单从第一个选择中分割出来。问题是，当我单击下一组导航项目时，链接到辅助导航的项目消失了，但该项目出现了。我不明白为什么二级导航菜单会消失……我希望它保持可见，这样最终用户就不必来回走动。

HTML：

<div class="floor"><div id="content">
<div id="hide_show">
  <nav2>
    <h2>Menù </h2>
    <div id="menuSX">
      <ul><h2>Number of Bedrooms</h2>
        <li><a class="menuitem" href="#A">1</a></li>
        <li><a class="menuitem" href="#B">2</a></li>
        <li><a class="menuitem" href="#C">3</a></li>
      </ul>
    </div>
  </nav2>
      <div class="menubox" id="A">
     <nav2><div id="menuSX"><ul><h2>Floor Plan</h2><li><a class="menuitem" href="#floor1">Reed</a></li>
<li><a class="menuitem" href="#floor2">Sotol</a></li>
<li><a class="menuitem" href="#floor3">Yucca</a></li>
</ul></div></nav2>
      </div>
    <div class="menubox" id="B">
      <h2>Sotol</h2></div>
    <div class="menubox" id="C">
      <h2>Yucca</h2></div>
  </div>
 <div class="menubox"id="floor1"><a href="http://sanisidroapartmentssantafe.com/wp-content/uploads/2013/12/home-placeholder2.png"><img src="http://sanisidroapartmentssantafe.com/wp-content/uploads/2013/12/home-placeholder2.png" alt="home-placeholder2" width="175" height="195" class="alignnone size-full wp-image-122" /></a>
Make our Santa Fe apartment community your home with a variety of one-, two-, and three-bedroom floor plans to choose from. Settle into a pet-friendly luxury apartment home that suits your current lifestyle and enjoy the fact that there is also room to grow.</div> 
</div>
<div class="clear"></div></div>

CSS：

.floor{
max-width: 953px;
border-top: 6px solid #ccc;
padding: 15px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.entry-content li{
 margin: 0;
}
.entry-content ul{
 list-style: none;
}
nav2 ul, nav2 ol {list-style: none; list-style-image: none; margin: 0; padding: 0;}
 nav2.collapsible > h2 {
background-color: #fff;
cursor: pointer;
  }
  .menuitem {
display: block;
background-color: #fff;
margin-bottom: 0.2em;
color: #333;
    max-width: 200px;
    padding-left: 25px;
    }
   .menuitem:hover  {
background-color: #AE7450;
    }
   @media only screen and (min-width: 768px) {
  nav2 > h2 {display: none;}
  nav2 {
float: left;
width: 30%;
   }
   #hide_show {
float: left;
width: 100%;
   }
   #menuSX {
float: left;
width: 100%;
    }
   #Content3 {
float: right;
width: 69%;
    }

   .menubox{
max-width: 375px;
    }
    }
   .small-type{
    font-size: 10px;
  font-family: 'Average Sans', san-serif;
}

jquery：

$(function() {
 var collapsed = true;
 $('nav2>h2').click(function() {
 collapsed = !collapsed;
 formatSidebar();
 });
 $(window).resize(formatSidebar);
 formatSidebar();

 function formatSidebar() {
 if ($(window).width() > 766) {
  $('nav2').removeClass('collapsible');
  $('nav2 #menuSX').show();
 } else {
  $('nav2').addClass('collapsible');
  if (collapsed) { 
    $('nav2 #menuSX').hide();
    $('nav2 > h2').removeClass('minus');
  } else {
    $('nav2 #menuSX').show();
    $('nav2 > h2').addClass('minus');
  }
  }
  };
  });


 $(document).ready(function() {
  $(".menubox").hide();
  $(".menubox:first").hide();

   $(".menuitem").click(function(event) {
    event.preventDefault();
    $(".menubox").hide();
    var relatedDivID = $(this).attr('href');

    $("" + relatedDivID).fadeToggle("slow","linear"); 
    });
    });</script>

我只链接了每个导航菜单上的第一个菜单项。如果我能让那个二级导航菜单保持原样，我会很高兴的。谢谢你的帮助。 这是页面：http://www.sanisidroapartmentssantafe.com/floor-plans

Answer 1

问题是子菜单“平面图”中的项目与“卧室数量”中的项目具有相同的类（.menuitem）。

正如您现在所拥有的，当用户单击一个选项时，它会隐藏包含“平面图”列表的.menubox。当您在卧室数量之间切换时，这很好。但是当您单击“平面图”列表下的选项时会导致问题。因为这些选项具有相同的类（.menuitem），它被设置为隐藏.menubox，在这种情况下，如果也是“平面图”链接的容器。

解决方法如下：

Here is the JSFiddle.

更改与“平面图”下的选项关联的类。

<div class="menubox" id="A">
    <nav2>
        <div id="menuSX"><ul><h2>Floor Plan</h2>
            <li><a class="sub-menuitem" href="#floor1">Reed</a></li>
            <li><a class="sub-menuitem" href="#floor2">Sotol</a></li>
            <li><a class="sub-menuitem" href="#floor3">Yucca</a></li>
            </ul>
        </div>
    </nav2>
</div>

在这里，我已将每个类更改为.sub-menuitem。

将此类添加到 css 中：

.menuitem, .sub-menuitem {
    display: block;
    background-color: #fff;
    margin-bottom: 0.2em;
    color: #333;
    max-width: 200px;
    padding-left: 25px;
}
.menuitem:hover, .sub-menuitem:hover  {
    background-color: #AE7450;
}

最后为.sub-menuitem 添加了一些javascript，以防止对新类的默认操作。

$(document).ready(function() {
  $(".menubox").hide();
  $(".menubox:first").hide();

   $(".menuitem").click(function(event) {
    event.preventDefault();
    $(".menubox").hide();
    var relatedDivID = $(this).attr('href');

    $("" + relatedDivID).fadeToggle("slow","linear"); 
    });

    $(".sub-menuitem").click(function(event) {
    event.preventDefault();
    var relatedDivID = $(this).attr('href');

    $("" + relatedDivID).fadeToggle("slow","linear"); 
    });
});

这样做还可以让您在将来需要时为该子菜单分配一些额外的事件。