#問簡單的下拉式選單

#css #下拉式選單

兔子兔子 2019-10-07 23:08:42 ‧ 4045 瀏覽

分享至

最近在練習簡單的下拉式選單，可是不知道為什麼把ul高設定為0後，裡面的li還是會跑出來QQ
就算在ul內加class去設定也不行

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		
<script src="jquery-3.4.1.min.js"></script>

	<style type="text/css">
		*{list-style:none; padding:0;margin: 0;}
		a{text-decoration:none;}
		ol{float:left; padding:20px}
		ul{background-color:#FF9696;max-height:0;}
		.aa ul{max-height:100px}

	</style>

</head>
<body>

	<div class="menu">		
		<ol> 
			<li><a href="#" class="btn1">下拉式選單</a> 
				<ul>
					<li><a href="#">111</a></li>
					<li><a href="#">222</a></li>
					<li><a href="#">333</a></li>
				</ul>
			</li>
		</ol>		
	</div>

	<script>
	$(document).ready(function() {
   $('ul').on('click',function(e){e.preventDefault();
      $('body').toggleClass('aa');
  });
});
</script>
</body>
</html>```

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

ccutmis

iT邦高手 2 級 ‧ 2019-10-07 23:59:59

最佳解答

我也來分享一個簡單的下拉式選單 jQuery寫法:
http://www.web3d.url.tw/ITHELP/JQUERY_20191007/index.htm

源碼如下:

<style>
*{
margin:0;padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav{display:flex; justify-content:center;}
.nav-item{position:relative;width:150px;}
.nav-item h3{padding:1em;border:solid 1px #333;background:#aaa;cursor:pointer;}
.nav-item ul{position:absolute;width:100%;top:3.5em;left:0px;}
.nav-item ul li{display:none;padding:1em;background:#000;color:#aaa;text-align:center;border:solid 1px #ccc;}
.nav-item ul li a:link,.nav-item ul li a:visited{text-decoration:none;color:#ccc;}
.nav-item ul li:hover{background:#555;}
.nav-item ul li a:hover,.nav-item ul li a:active{color:#ff0;}
h3.switchDisplay{background:#ff0;}
ul.switchDisplay li{display:block;}
</style>

<div class="nav">
	<div class="nav-item">
		<h3>下拉式選單1</h3>
		<ul>
			<li><a href="">測試項目1</a></li>
			<li><a href="">測試項目2</a></li>
			<li><a href="">測試項目3</a></li>
			<li><a href="">測試項目4</a></li>
		</ul>
	</div>
	<div class="nav-item">
		<h3>下拉式選單2</h3>
		<ul>
			<li><a href="">測試項目1</a></li>
			<li><a href="">測試項目2</a></li>
			<li><a href="">測試項目3</a></li>
		</ul>
	</div>
	<div class="nav-item">
		<h3>下拉式選單3</h3>
		<ul>
			<li><a href="">測試項目1</a></li>
			<li><a href="">測試項目2</a></li>
			<li><a href="">測試項目3</a></li>
			<li><a href="">測試項目4</a></li>
			<li><a href="">測試項目5</a></li>
			<li><a href="">測試項目6</a></li>
		</ul>
	</div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<script>
$('.nav-item h3').on('click',function(){
	if($(this).hasClass( "switchDisplay" )==false){
		$('.nav-item h3,.nav-item ul').removeClass('switchDisplay');
	}
	$(this).toggleClass('switchDisplay').siblings().toggleClass('switchDisplay');
});
</script>

補充1: 參考邦友 dragonH 提供的範例修改的demo
http://www.web3d.url.tw/ITHELP/JQUERY_20191007/index2.htm

源碼:

<style>
* {
margin:0;padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style:none;
}
a{
  text-decoration: none;line-height:2em;font-size:1rem;
}
a.open{background:#6F6;}
ol {}
ol li{
  text-align:center;
  position:relative;
  float:left;
  width:150px;
  background:#ccc;
  font-size:1rem;line-height:2em;
  margin-left:1px;
}
ul {
  position:absolute;
  top:2rem;left:0;
  width:150px;
  display: none;
}
ul li{width:100%;padding:0.5rem;}
.open {
 display: block;
}
.open li{background:#C6FFAA;}
</style>


<div class="menu">
  <ol>
    <li><a class="btn" href="#">下拉式選單</a>
      <ul class="mymenu">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </li>
    <li><a class="btn" href="#">下拉式選單</a>
      <ul class="mymenu">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </li>
    <li><a class="btn" href="#">下拉式選單</a>
      <ul class="mymenu">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </li>
  </ol>
</div>

<script>
$(document).ready(function() {
   $('.btn').on('click',function(e){
      e.preventDefault();
      if($(this).hasClass('open')==false){
       $('.btn').removeClass('open').siblings().slideUp('slow').hide('slow');
      }
      if($(this).siblings().css('display')=='block'){
        $(this).toggleClass('open').siblings().slideUp('slow').hide('slow');
      }else{
        $(this).toggleClass('open').siblings().slideDown();
      }
  });
});
</script>

補充2: 把事件由 "click"(適合移動應用) 改成 "mouseover & mouseout"(適合PC應用)
http://www.web3d.url.tw/ITHELP/JQUERY_20191007/index3.htm

源碼:


<script>
$(document).ready(function() {
   $('.menu ol li').on('mouseover',function(){
      if($(this).children('a').hasClass('open')==false){
         $('.btn,.mymenu').removeClass('open');
      }
      $(this).children('a').toggleClass('open').siblings().toggleClass('open');
  });
  $('.menu ol li').on('mouseout',function(){
      $(this).children('a').removeClass('open').siblings().removeClass('open');
  });
});
</script>

補充3: 純CSS的下拉選單(帶動畫效果)
http://www.web3d.url.tw/ITHELP/CSS_20191008/index.htm

回應 10
分享
檢舉

看更多先前的回應...收起先前的回應...

兔子兔子 iT邦新手 5 級 ‧ 2019-10-08 08:54:18 檢舉

謝謝你>< 所以大部分的人都沒有在用height來設定的嗎？因為想做滑鼠點擊時選單從上面滑下來的感覺

豬豬人 iT邦新手 4 級 ‧ 2019-10-08 09:01:42 檢舉

上面滑下來是動畫效果喔

ccutmis iT邦高手 2 級 ‧ 2019-10-08 10:27:36 檢舉

大部分的人都沒有在用height來設定的嗎

一般顯示跟隱藏切換的就像樓上的 dragonH 大說的大都是用 display:none; 跟 display:block; 去作切換，為什麼，因為大家都懶^^"，動畫原理就是欺騙視覺，照你的思路想法也是能做，但是要費很多工，在jQuery裡面有內建不少動畫效果，例如show(),hide(),slideUp(),slideDown()等等，你說到的點了之後會滑下來的效果我把先前的demo修改一下就能work了...
http://www.web3d.url.tw/ITHELP/JQUERY_20191007/index2.htm

code:

<script>
$(document).ready(function() {
   $('.btn').on('click',function(e){
      e.preventDefault();
      if($(this).hasClass('open')==false){
       $('.btn').removeClass('open').siblings().slideUp('slow').hide('slow');
      }
      if($(this).siblings().css('display')=='block'){
        $(this).toggleClass('open').siblings().slideUp('slow').hide('slow');
      }else{
        $(this).toggleClass('open').siblings().slideDown();
      }
  });
});
</script>

兔子兔子 iT邦新手 5 級 ‧ 2019-10-08 11:10:52 檢舉

都只能用js跟jquery做嗎?QQ

dragonH iT邦超人 5 級 ‧ 2019-10-08 11:22:08 檢舉

兔子兔子

你可以用純 css 的 :hover

li:hover ul{
  display: block;
}

兔子兔子 iT邦新手 5 級 ‧ 2019-10-08 12:31:55 檢舉

!!太感謝你了~剛剛有做出來了~
不過好奇問一下，既然可以用hover就好為什麼大部分的例子都還要用js跟jquery?

ccutmis iT邦高手 2 級 ‧ 2019-10-08 12:44:05 檢舉

既然可以用hover就好為什麼大部分的例子都還要用js跟jquery?

因為樓主問題描述裡面用到jQuery啊 o_o"
只是要做選單顯示隱藏是可以用純css就好，
但如果是要做選單滑動效果那種是用js或jQuery比較簡單，
不太複雜的選單滑動效果用純css也是可能做到，但是比較費工

ccutmis iT邦高手 2 級 ‧ 2019-10-08 15:11:10 檢舉

底下這個是簡單的純CSS下拉選單效果:
http://www.web3d.url.tw/ITHELP/CSS_20191008/index.htm

我刻意把那個input框框放大讓你看它是怎麼作用的，
實際運用的時候通常會把它WH設為1然後移到可視範圍外面，
label標籤則是用來作點擊範圍 for="toggle" 表示它對應到 id名為toggle的那個input

在多數情況下以效能來比較: 純CSS > 純JS > JQUERY
所以我現在寫東西都是能不用JQUERY就不用了...

兔子兔子 iT邦新手 5 級 ‧ 2019-10-12 21:39:29 檢舉

不好意思這幾天看你的code發現更多不會的地方就跑去查到沒回你><
謝謝你幫我那麼多ww

ccutmis iT邦高手 2 級 ‧ 2019-10-12 22:16:42 檢舉

不客氣...教學相長。

登入發表回應

dragonH

iT邦超人 5 級 ‧ 2019-10-07 23:35:07

codepen

通常是用

display: none;

而不是 height

回應 8
分享
檢舉

看更多先前的回應...收起先前的回應...

兔子兔子 iT邦新手 5 級 ‧ 2019-10-07 23:37:26 檢舉

可是想要按了按鈕跑出選單，在按一次就消失，用none就出不來了qq

dragonH iT邦超人 5 級 ‧ 2019-10-07 23:42:50 檢舉

display: block 阿

兔子兔子 iT邦新手 5 級 ‧ 2019-10-07 23:46:37 檢舉

試過了還是不行

dragonH iT邦超人 5 級 ‧ 2019-10-08 00:07:36 檢舉

兔子兔子

codepen

沒看到 code 不知道你的問題在哪

咖咖拉 iT邦好手 1 級 ‧ 2019-10-08 09:49:00 檢舉

$(document).ready(function() {
   $('.btn1').on('click',function(e){
     e.preventDefault();
      $('#mymenu').toggleClass('open');
  });
      $('ul li a').on('click',function(e){
   $('#mymenu').removeClass("open");
  });
});

她可能是要這個