検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >jQueryでdivを結合した後、上のdivをプルダウンした際に下のdivが変化しないようにする方法についてdropdown_html/css_WEB-ITnose

jQueryでdivを結合した後、上のdivをプルダウンした際に下のdivが変化しないようにする方法についてdropdown_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:21:401067ブラウズ

HTML jQuery 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title></title>  <style type="text/css">	* { margin:0; padding:0;}	.dl_b{margin:0; padding:15px;height:10px;background:#0099ff}	.c{width:100px;height:30px}	.panel{width:100%;height:300px;background:#8080c0}  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body>	<div id="dlzc" class="dl_b">   登录/注册</div>	<div class="panel" id ="panel" style="display:none;">	<div id="dlpage" style="float:left">	 <form action="action"> 		<br>		<br>		<br>		<br><pre class="brush:php;toolbar:false">  		用户名：<input type="text" name="username"/><br>  		密  码：<input type="password" name="password"/><br>  		<input class="c" type="submit" value="登录" /><br>		


		  	<form action="action2" method="post">  						 用户名 ：<input type="text" name="username"><br>						密    码：<input type="password" name="password"><br>						密码确认：<input type="password" name="password1"><br>						<input class="c" type="submit" value="注册"><br>  		</form>

如何让这部分不会随上面下拉而变化。
<script> $(document).ready(function(){$("#dlzc").click(function(){ $("#panel").slideToggle("slow"); });});</script>

=============
コードは上記のとおりです。望ましい効果を得るためにどのように設定するかについてアドバイスをお願いします。

ディスカッションへの返信 (解決策)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title></title>  <style type="text/css">    * { margin:0; padding:0;}    .dl_b{margin:0; padding:15px;height:10px;background:#0099ff}    .c{width:100px;height:30px}    .panel{width:100%;height:300px;background:#8080c0}  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body>    <div id="dlzc" class="dl_b">   登录/注册</div>    <div class="panel" id ="panel" style="display:none;">    <div id="dlpage" style="float:left">     <form action="action">         <br>        <br>        <br>        <br><pre class="brush:php;toolbar:false">          用户名：<input type="text" name="username"/><br>          密  码：<input type="password" name="password"/><br>          <input class="c" type="submit" value="登录" /><br>        


              <form action="action2" method="post">                           用户名 ：<input type="text" name="username"><br>                        密    码：<input type="password" name="password"><br>                        密码确认：<input type="password" name="password1"><br>                        <input class="c" type="submit" value="注册"><br>          </form>

如何让这部分不会随上面下拉而变化。
<script> $(document).ready(function(){$("#dlzc").click(function(){ $("#panel").slideToggle("slow"); });});</script>


これはどういう意味ですか?

ポジショニングを使用する 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title></title>  <style type="text/css">    * { margin:0; padding:0;}    .dl_b{margin:0; padding:15px;height:10px;background:#0099ff}    .c{width:100px;height:30px}    .panel{width:100%;height:300px;background:#8080c0}  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body>    <div id="dlzc" class="dl_b">   登录/注册</div>    <div class="panel" id ="panel" style="display:none;">    <div id="dlpage" style="float:left">     <form action="action">         <br>        <br>        <br>        <br><pre class="brush:php;toolbar:false">          用户名：<input type="text" name="username"/><br>          密  码：<input type="password" name="password"/><br>          <input class="c" type="submit" value="登录" /><br>        


              <form action="action2" method="post">                           用户名 ：<input type="text" name="username"><br>                        密    码：<input type="password" name="password"><br>                        密码确认：<input type="password" name="password1"><br>                        <input class="c" type="submit" value="注册"><br>          </form>

如何让这部分不会随上面下拉而变化。
<script> $(document).ready(function(){$("#dlzc").click(function(){ $("#panel").slideToggle("slow"); });});</script>


これはどういう意味ですか?

位置決めを使用します。重要なのは、上記の div をプルダウンした後、その上にプルダウン div を重ねることができるということです。 http://www.m1905.com/ は、この Web サイトの左上隅のようなものです。


rree


これはどういう意味ですか?

位置決めを使用します。重要なのは、上記の div をプルダウンした後、その上にプルダウン div を重ねることができるということです。 http://www.m1905.com/ は、この Web サイトの左上隅のようなものです。

あなたのポジショニングは役に立たないですよね？ドロップダウン div を上部にフロートさせるには、位置決めを使用する必要があります。最初に相対位置決めを行い、次に絶対位置決めを行います。絶対位置を指定するために、そこに z-index 属性を追加することを忘れないでください。インターネット上には関連する特殊効果が数多くあります。位置決めの使用方法も学ぶことができます 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title></title>  <style type="text/css">    * { margin:0; padding:0;}    .dl_b{margin:0; padding:15px;height:10px;background:#0099ff}    .c{width:100px;height:30px}    .panel{width:100%;height:300px;background:#8080c0}  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body>    <div id="dlzc" class="dl_b">   登录/注册</div>    <div class="panel" id ="panel" style="display:none;">    <div id="dlpage" style="float:left">     <form action="action">         <br>        <br>        <br>        <br><pre class="brush:php;toolbar:false">          用户名：<input type="text" name="username"/><br>          密  码：<input type="password" name="password"/><br>          <input class="c" type="submit" value="登录" /><br>        


              <form action="action2" method="post">                           用户名 ：<input type="text" name="username"><br>                        密    码：<input type="password" name="password"><br>                        密码确认：<input type="password" name="password1"><br>                        <input class="c" type="submit" value="注册"><br>          </form>

如何让这部分不会随上面下拉而变化。
<script> $(document).ready(function(){$("#dlzc").click(function(){ $("#panel").slideToggle("slow"); });});</script>


私はそれを何気なく定義したものであり、標準化された CSS を作成したわけではありません。 IE6 は固定属性をサポートしていないため、IE6 では役に立ちません。 IE6 をサポートしたい場合、単純な CSS ではサポートできなくなります。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：このような窓がどのように作られるか知っている人はいますか？ _html/css_WEB-ITnose次の記事：このような窓がどのように作られるか知っている人はいますか？ _html/css_WEB-ITnose

関連記事

続きを見る