1. 首頁
  2. 問答
  3. 下拉菜單的jquery

下拉菜單的jquery

2015-02-06 133 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

相關問題

 相關問題