Question

我使用jQuery构建了这个小提琴来选择一个顶级菜单，它使用一系列切换CSS和使用jQuery隐藏/显示来显示第二个菜单div。

这是有效的，但我是一个初学者，并且相对确定有一种更简单，更简洁的方式来编写此代码。例如，一种更简单的方法来分配类并影响所有div或更好地使用this。任何帮助表示赞赏。

$("#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");

Answer 2

你可以用这种方式简化你的js代码：

$('.toggle').each(function(){
    $(this).click(function () {
        $(this).toggleClass("selected");
        $(".secondMenu").hide();
        $(".toggle").removeClass("selected");
        $('#'+$(this).attr('id')+'1').toggle();
    });
});

此代码在您的html中使用“toggle”类搜索每个元素。无需重复所有这些。

使用小提琴编辑link

Answer 3

基本上你应该尽量减少你的代码.. 所以你可以试试这个。

<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 home">
    <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 profile">
    <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 resume">
    <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 work">
    <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 adventures">
    <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>

JS

$(".toggle").click(function () {
    $(".secondMenu").hide();
    $("."+$(this).attr("id")).show();
    $(".toggle").removeClass("selected");
    $(this).addClass("selected");
});

Answer 4

所有其他解决方案都不正确，因为它没有显示链接的活动状态。我的解决方案确实显示了活动状态：

＆＃13;

$(function() {
    $('.toggle').click(function () {        
        $('.toggle').removeClass('selected');
        $('.secondMenu').removeClass('show');
        
        var $this = $(this),
            $name = $(this).attr('id'),
            $name = '#' + $name + '1';
        
        $this.addClass('selected');                
        $($name).addClass('show');
    });
});

＆＃13;

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.show {
    display: block;
}
.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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>

＆＃13;

Answer 5

更短的版本：

$(".toggle").click(function () {
    $(this).toggleClass("selected");
    $(".secondMenu").hide();
    $(".toggle").removeClass("selected");
    $("#"+this.dataset.id+"1").toggle();
});

http://jsfiddle.net/DariuszMusielak/gcnhw2dk/

下拉菜单的Jquery

5 个答案: