Javascript 这是最好的方法吗？

我有一个导航栏，有两个下拉菜单（如嵌套的ul）。我试图在单击其父项时切换子AV。或在单击另一个父级时隐藏一个子AV。以下是标记：

<div id="nav-bar">
  <a href="#">A link</a> |
  <ul>
    <li id="feedback">
      <a href="javascript:void(0);">Feedback</a>
      <ul class="subnav">
        <li><a href="#">Give us feedback</a></li>
       </ul>
     </li>
  </ul> |
  <a href="#">Another link</a> |
  <ul>
    <li id="location">
      <a href="javascript:void(0);">Pick your location</a>
      <ul class="subnav">
        <li><a href="#">Los Angeles</a></li>
        <li><a href="#">New York</a></li>
       </ul>
     </li>
  </ul>
</div>

|






|
|

以及守则：

//hide the subnavs and give them a little down arrow
$('ul.subnav').hide().parent().append('<small>&#9660;</small>');

// show its subnav when clicked
$('#nav-bar ul li').click(function() {
  var subnav = $(this).children('ul.subnav');
  // hide the other's subnav if it's visible
  if ($(this).attr('id') == 'location') {
    subnav.toggle();
    $('li#feedback').children('ul.subnav').hide();
  } else {
    subnav.toggle();
    $('li#location').children('ul.subnav').hide();
  }
});

//隐藏子AV并给它们一点向下箭头
$（'ul.subnav'）.hide（）.parent（）.append（'▼；'）；
//单击时显示其子AV
$（“#导航栏ul li”）。单击（函数（）{
var subnav=$（this.children（'ul.subnav'）；
//隐藏对方的子AV（如果可见）
if（$（this.attr（'id'）=='location'）{
subnav.toggle（）；
$（'li#feedback'）.children（'ul.subnav'）.hide（）；
}否则{
subnav.toggle（）；
$（'li#location'）.children（'ul.subnav'）.hide（）；
}
});

我还是JS和jQuery的新手，我想知道是否有一种不那么冗长的方法来完成我在上面尝试做的事情

---

编辑：一个更好的问题是，有没有一种方法可以做到这一点而不必显式地给li的id？

更好的格式应该是这样的：

<ul id="nav-bar">
  <li><a href="#">A link</a> |</li>
  <li>
    <a href="#">Feedback</a> |
    <ul class="subnav">
      <li><a href="#">Give us feedback</a></li>
     </ul>
  </li>
  <li><a href="#">Another link</a> |</li>
  <li>
    <a href="#">Pick your location</a> |
    <ul class="subnav">
      <li><a href="#">Los Angeles</a></li>
      <li><a href="#">New York</a></li>
     </ul>
   </li>
</ul>

---

对于HTML，更好的格式如下所示：

<ul id="nav-bar">
  <li><a href="#">A link</a> |</li>
  <li>
    <a href="#">Feedback</a> |
    <ul class="subnav">
      <li><a href="#">Give us feedback</a></li>
     </ul>
  </li>
  <li><a href="#">Another link</a> |</li>
  <li>
    <a href="#">Pick your location</a> |
    <ul class="subnav">
      <li><a href="#">Los Angeles</a></li>
      <li><a href="#">New York</a></li>
     </ul>
   </li>
</ul>

---

嗯，有几种方法可以使代码的维护变得更容易一些。下面是一个简单的例子：

//hide the subnavs and give them a little down arrow
$('ul.subnav').hide().parent().append('<small>&#9660;</small>');

// show its subnav when clicked
$('#nav-bar ul li').click(function() {
  var subnav = $(this).children('ul.subnav');
  // hide the other's subnav if it's visible

 $('ul.subnav').hide();
 subnav.toggle();
});

//隐藏子AV并给它们一点向下箭头
$（'ul.subnav'）.hide（）.parent（）.append（'▼；'）；
//单击时显示其子AV
$（“#导航栏ul li”）。单击（函数（）{
var subnav=$（this.children（'ul.subnav'）；
//隐藏对方的子AV（如果可见）
$（'ul.subnav'）.hide（）；
subnav.toggle（）；
});

基本上，这将再次重新隐藏所有“subnav”元素，然后显示单击的元素。但是这里的主要区别是，现在您可以添加第三、第四、第五等下拉菜单，或者在不必更改javascript的情况下更改ID

您使用的HTML看起来相当不错，并且与“标准”导航菜单相对类似

---

编辑：这显然与前面的答案类似：p

好吧，有几种方法可以使代码的维护变得更容易一些。下面是一个简单的例子：

//hide the subnavs and give them a little down arrow
$('ul.subnav').hide().parent().append('<small>&#9660;</small>');

// show its subnav when clicked
$('#nav-bar ul li').click(function() {
  var subnav = $(this).children('ul.subnav');
  // hide the other's subnav if it's visible

 $('ul.subnav').hide();
 subnav.toggle();
});

//隐藏子AV并给它们一点向下箭头
$（'ul.subnav'）.hide（）.parent（）.append（'▼；'）；
//单击时显示其子AV
$（“#导航栏ul li”）。单击（函数（）{
var subnav=$（this.children（'ul.subnav'）；
//隐藏对方的子AV（如果可见）
$（'ul.subnav'）.hide（）；
subnav.toggle（）；
});

基本上，这将再次重新隐藏所有“subnav”元素，然后显示单击的元素。但是这里的主要区别是，现在您可以添加第三、第四、第五等下拉菜单，或者在不必更改javascript的情况下更改ID

您使用的HTML看起来相当不错，并且与“标准”导航菜单相对类似

---

编辑：这显然与前面的答案类似：p

我要去掉内联的

javascript:void（0）

code这是不必要的。将您的链接链接到“#”

你肯定不想匹配ID，因为它的伸缩性不是很好。相反，类似的方法应该有效（未经测试）：

只要有可能，您就需要编写代码，这样就不必每次都从dom中获取新元素。据我所知，在遍历已经找到的元素时进行链接比获取新元素更有效

---

.end（）将您的链还原回以前找到的元素，因此当我说.nearest（“blah”）.find（“blah2”）时，我将深入两个级别。end（）.end（）将使我返回到原始项（此项），这样我就可以找到它下面的特定子AV。

我将去掉内联的

javascript:void（0）

code它是不必要的。将您的链接链接到“#”

你肯定不想匹配ID，因为它的伸缩性不是很好。相反，类似的方法应该有效（未经测试）：

只要有可能，您就需要编写代码，这样就不必每次都从dom中获取新元素。据我所知，在遍历已经找到的元素时进行链接比获取新元素更有效

---

.end（）将您的链还原回以前找到的元素，因此当我说.nearest（“blah”）.find（“blah2”）时，我将深入两个级别。end（）.end（）将使我返回到原始项（此项），以便我可以在其下方找到特定的子项。

您应该说出您想要实现的目标。。而不是让人们试图从你的代码中找出答案。。我们如何知道您要做的就是您的代码是什么？我试图在单击子AVS的父级时切换子AVS。或者在单击另一个父级时隐藏一个子AV。请注意Laykes。你需要解释一下你想做什么，特别是你不喜欢现在做什么。你应该说出你想实现什么。。而不是让人们试图从你的代码中找出答案。。我们如何知道您要做的就是您的代码是什么？我试图在单击子AVS的父级时切换子AVS。或者在单击另一个父级时隐藏一个子AV。请注意Laykes。你需要解释你想做什么，特别是你不喜欢你现在做什么。这是我更想做的。效果很好。我知道这需要你解释很多，但你这样做的原因是什么？我这样做是否不理想？为什么？@farkenfooken首先，我尝试使用语义标记（这导致标记较少），将导航描述为“链接列表”，其中一些链接具有“子链接”