javascript - 下拉菜单的 Jquery

Question

我使用 jQuery 构建了这个 fiddle 来选择一个顶部菜单，该菜单使用一系列切换 CSS 并使用 jQuery 隐藏/显示来显示第二个菜单 div。

这行得通，但我是初学者，并且相对确定有一种更简洁、更简短的方法来编写这段代码。例如，一种更简单的方法来分配类并影响所有 div 或更好地使用 this。感谢您的帮助。

Fiddle

$("#home").click(function() {
  $(this).toggleClass("selected");
  $(".secondMenu").hide();
  $(".toggle").removeClass("selected");
  $("#home1").toggle();
});

$("#profile").click(function() {
  $(".toggle").removeClass("selected");
  $(this).toggleClass("selected");
  $(".secondMenu").hide();
  $("#profile1").toggle();
});

$("#resume").click(function() {
  $(".toggle").removeClass("selected");
  $(this).toggleClass("selected");
  $(".secondMenu").hide();
  $("#resume1").toggle();
});

$("#work").click(function() {
  $(".toggle").removeClass("selected");
  $(this).toggleClass("selected");
  $(".secondMenu").hide();
  $("#work1").toggle();
});

$("#adventures").click(function() {
  $(".toggle").removeClass("selected");
  $(this).toggleClass("selected");
  $(".secondMenu").hide();
  $("#adventures1").toggle();
});

body {
  padding: 0px;
  margin: 0px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}
#topBar {
  margin: 0px;
  height: 50px;
  width: 100%;
  background-color: #990000;
}
#mainMenu {
  margin: 25px 0 0 0;
  list-style: none;
  float: right;
}
#mainMenu li {
  float: left;
  border-right: 1px solid white;
  padding: 0 5px 0 5px;
  color: white;
}
.selected {
  background-color: #3E0C0D;
  border: 1px solid black;
  height: 100%;
}
.secondMenu {
  position: relative;
  height: 30px;
  width: 100%;
  background-color: #3E0C0D;
  clear: right;
  display: none;
}
.secondMenu ul {
  float: right;
  margin: 8px 0 0 0;
  list-style: none;
}
.secondMenu li {
  float: left;
  border-right: 1px solid white;
  padding: 0 5px 0 5px;
  color: white;
  font-size: 80%;
}
#clearDiv {
  clear: both;
  margin: 0px;
  padding: 0px;
}

<div id="wrapper">
  <div id="topBar">
    <ul id="mainMenu">
      <li class="toggle" id="home">Home</li>
      <li class="toggle" id="profile">Profile</li>
      <li class="toggle" id="resume">Resume</li>
      <li class="toggle" id="work">Work Examples</li>
      <li style="border:none" class="toggle" id="adventures">Adventures</li>
    </ul>
  </div>
  <div class="secondMenu" id="home1">
    <ul>
      <li>home</li>
      <li>home</li>
      <li>home</li>
      <li>home</li>
      <li>home</li>
      <li>home</li>
      <li style="border:none">home</li>
    </ul>
  </div>
  <div class="secondMenu" id="profile1">
    <ul>
      <li>prof</li>
      <li>prof</li>
      <li>prof</li>
      <li>prof</li>
      <li>prof</li>
      <li>prof</li>
      <li style="border:none">prof</li>
    </ul>
  </div>
  <div class="secondMenu" id="resume1">
    <ul>
      <li>res</li>
      <li>res</li>
      <li>res</li>
      <li>res</li>
      <li>res</li>
      <li>res</li>
      <li style="border:none">res</li>
    </ul>
  </div>
  <div class="secondMenu" id="work1">
    <ul>
      <li>egs</li>
      <li>egs</li>
      <li>egs</li>
      <li>egs</li>
      <li>egs</li>
      <li>egs</li>
      <li style="border:none">home</li>
    </ul>
  </div>
  <div class="secondMenu" id="adventures1">
    <ul>
      <li>adv</li>
      <li>adv</li>
      <li>adv</li>
      <li>adv</li>
      <li>adv</li>
      <li>adv</li>
      <li style="border:none">home</li>
    </ul>
  </div>
  <div id="clearDiv"></div>
</div>

Answer 1

你的意思是像this

这是代码

function dropdownMenu(triger, target) {
$("#"+triger).click(function(){
    $(this).toggleClass("selected");
    $(".secondMenu").hide();
    $(".toggle").removeClass("selected");
    $("#"+target).toggle();
})    
}

dropdownMenu("home", "home1");
dropdownMenu("profile", "profile1");
dropdownMenu("resume", "resume1");
dropdownMenu("work", "work1");
dropdownMenu("adventures", "adventures1");