1. 首页
  2. 问答
  3. 下拉菜单的jquery

下拉菜单的jquery

2015-02-06 127 views
0

我已经建立了这个小提琴使用jQuery来选择顶级菜单，显示第二个菜单div使用一系列切换CSS和jQuery隐藏/显示。下拉菜单的jquery

这有效，但我是一个初学者，相对肯定有一个更简单，更简单的方法来写这段代码。例如更简单的方法来分配类并影响所有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>

来源

2015-02-06 hselbie

+0

你并不真正需要的JavaScript，所有的菜单可以建立css现在。您还可以添加动画，这些动画可以在现代浏览器中使用。第一个结果在谷歌http://purecss.io/menus/ – Morpheus 2015-02-06 18:15:09

+0

看看这个 - http://stackoverflow.com/questions/28369240/make-drop-down-menu-flexible-width我相信这是最简单的方法要做下拉菜单，你需要在css中移除'.hover'动作，并将其作为点击动作放入jQuery中。但是，您可以选择是否使用该功能，也可能用于您的下一个项目。现在事情已经很好了。 – Stickers 2015-02-06 18:16:56

回答

0

你的意思是这样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");

来源

2015-02-06 18:22:05

0

你可以简化你的js代码是这样的：

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

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

编辑与小提琴link

来源

2015-02-06 18:34:03

0

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

<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"); 
});

来源

2015-02-06 18:58:13 harry

0

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

$(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'); 
 
    }); 
 
});
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; 
 
}
<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>

来源

2015-02-06 19:51:43 arnolds

相关问题

 相关问题