读书人
栏目▼

关于div结合jQuery下拉后怎么使得下

发布时间： 2013-07-08 14:13:00 作者： rapoo

关于div结合jQuery下拉后，如何使得下方的div不会随上面的div下拉而发生变化

<!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>
  用户名：<input type="text" name="username"/><br>
  密  码：<input type="password" name="password"/><br>
  <input class="c" type="submit" value="登录" /><br>
</pre>
  </form>
</div>
<div id="zhucepage" style="float:left">
<br>
<br>
<pre>
  <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>
</pre>
</div>
</div>
<br>
     <div>
如何让这部分不会随上面下拉而变化。
        </div>
 <script> 
$(document).ready(function(){
$("#dlzc").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
</script>
 </body>
</html>


=============
代码如上，求大神指点，如何设置才能获得我所期望的效果。 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>
          用户名：<input type="text" name="username"/><br>
          密  码：<input type="password" name="password"/><br>
          <input class="c" type="submit" value="登录" /><br>
        </pre>
      </form>
    </div>
    <div id="zhucepage" style="float:left">
        <br>
        <br>
    <pre>
              <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>
        </pre>
    </div>
    </div>
    <br>
         <div style="position:absolute;top:55px;">
        如何让这部分不会随上面下拉而变化。
        </div>
 <script> 
$(document).ready(function(){
$("#dlzc").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
</script>
 </body>
</html>



这个意思？

使用定位
[解决办法]
引用:
Quote: 引用:

<!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>
          用户名：<input type="text" name="username"/><br>
          密  码：<input type="password" name="password"/><br>
          <input class="c" type="submit" value="登录" /><br>
        </pre>
      </form>
    </div>
    <div id="zhucepage" style="float:left">
        <br>
        <br>
    <pre>
              <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>
        </pre>
    </div>
    </div>
    <br>
         <div style="position:absolute;top:55px;">
        如何让这部分不会随上面下拉而变化。
        </div>
 <script> 
$(document).ready(function(){
$("#dlzc").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
</script>
 </body>
</html>



这个意思？

使用定位
定位我用过，关键是上面div下拉后2个div内容重合了，能不能让下拉的div浮于它的上层。http://www.m1905.com/像这个网站的左上方一样。


你是定位没有用好吧？要实现下拉div浮于上层就是得用定位。先相对定位，再绝对定位。绝对定位那里不要忘记加z-index属性。网上很多相关特效啊。你也可以去了解一下定位到底怎么使用


[解决办法]

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">  
 <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; position:absolute; z-index:999;}
  </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 style="position:relative;">
    <div class="panel" id ="panel" style="display:none;">
    <div id="dlpage" style="float:left">
     <form action="action"> 
        <br>
        <br>
        <br>
        <br><pre>
          用户名：<input type="text" name="username"/><br>
          密  码：<input type="password" name="password"/><br>
          <input class="c" type="submit" value="登录" /><br>
        </pre>
      </form>
    </div>
    <div id="zhucepage" style="float:left">
        <br>
        <br>
    <pre>
              <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>
        </pre>
    </div>
    </div></div>
    <br>
         <div style="position:fixed;">
        如何让这部分不会随上面下拉而变化。
        </div> 
 
 <script> 
$(document).ready(function(){
$("#dlzc").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
</script>
 </body>
</html>



我随便定义了一下，没有给你进行规范的css编写。在IE6下无用，因为IE6不支持fixed属性。想支持IE6，单纯的css已经实现不了了。

读书人网 >CSS

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net