網頁Web-JQuery-3. 打開、隱藏元件

  • 2538
  • 0
  • Web
  • 2022-12-03

1.html

2.jquery

3.隱藏.hide()、打開.show() 元素

4..hide() 隱藏後要做的事

5.同時打開、隱藏 .toggle()

6.打開收合加上CSS樣式

隱藏時:

打開時:

1.html

先建立html畫面

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<p>Hello,World</p>
<button id="myphide">隱藏</button>
<button id="mypshow">打開</button>
</body>
</html>

2.jquery

點擊事件

$("#id").click(function(){
       ....
});

隱藏

$("p").hide();

打開

$("p").show();

<script>
$(document).ready(function(){
    $("#myphide").click(function(){
        $("p").hide();
    });
    $("#mypshow").click(function(){
        $("p").show();
    });
});
</script>

完整Code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<p>Hello,World</p>
<button id="myphide">隱藏</button>
<button id="mypshow">打開</button>
</body>
</html>

<script>
$(document).ready(function(){
    $("#myphide").click(function(){
        $("p").hide();
    });
    $("#mypshow").click(function(){
        $("p").show();
    });
});
</script>

參考:https://codepen.io/yiruatstudio/pen/rNMVqab


4..hide() 隱藏後要做的事

.hide()
#可以接受參數(毫秒、slow、fast)
#要做什麼事寫在 function(){}中

$("#myphide2").click(function(){
        $("p").hide("slow", function(){
            alert("123456");
        });
});

   

 

參考:https://codepen.io/yiruatstudio/pen/OJRVBQZ


5.同時打開、隱藏 .toggle()

<button id="myptoggle">隱藏、打開</button>
<script>
$(document).ready(function(){
	$("#myptoggle").click(function(){
        $("p").toggle();
    });
});
</script>

完整Code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<p>Hello,World</p>
<button id="myphide1">隱藏1</button>
<button id="myphide2">隱藏2</button>
<button id="mypshow">打開</button>
<button id="myptoggle">隱藏、打開</button>
</body>
</html>

<script>
$(document).ready(function(){

	$("#myphide1").click(function(){
         $("p").hide();
    });
	
    $("#myphide2").click(function(){
        $("p").hide("slow", function(){
            alert("123456");
        });
    });
    $("#mypshow").click(function(){
        $("p").show();
    });
	
	$("#myptoggle").click(function(){
        $("p").toggle();
    });
});
</script>



參考:https://codepen.io/yiruatstudio/pen/gOwpBje

6.打開收合加上CSS樣式

點擊時:

1.HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
	<div id="hello">HelloWorld!</div>
	<div id="hi">Hi,Today!</div>
</body>
</html>

套用CSS樣式:

<style> 
#hi, #hello {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#hi {
    padding: 50px;
    display: none;
}
</style>

套用JQ:

點擊時,慢慢打開

<script> 
$(document).ready(function(){
    $("#hello").click(function(){
        $("#hi").slideDown("slow");
    });
});
</script>

完整Code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style> 
#hi, #hello {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#hi {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>
	<div id="hello">HelloWorld!</div>
	<div id="hi">Hi,Today!</div>
</body>
</html>


<script> 
$(document).ready(function(){
    $("#hello").click(function(){
        $("#hi").slideDown("slow");
    });
});
</script>




線上看效果CodePan-https://codepen.io/yiruatstudio/pen/wvzaQWZ


其它效果

#下開   .slideDown();

#上關  .slideUp();

#上下收合.slideToggle();

完整Code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style> 
#hi, #hello1,#hello2,#hello3 {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#hi {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>
	<div id="hello1">開</div>
	<div id="hello2">關</div>
	<div id="hello3">收合</div>
	<div id="hi">Hi,Today!</div>
</body>
</html>


<script> 
$(document).ready(function(){
    $("#hello1").click(function(){
        $("#hi").slideDown("slow");
    });
	$("#hello2").click(function(){
        $("#hi").slideUp("slow");
    });
	$("#hello3").click(function(){
        $("#hi").slideToggle("slow");
    });
});
</script>




CodePan看效果-https://codepen.io/yiruatstudio/pen/XWjbyaM

Yiru@Studio - 關於我 - 意如