jQuery多个向下滑动div

时间：2022-04-27 06:07:30

I found a tutorial on making the following slide down panel. http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html I'd like to have multiple slide down menus across the top of the screen

我找到了一个关于制作以下滑动面板的教程。 http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html我想在屏幕顶部有多个下拉菜单

I tried creating an new and tried setting it to display:inline, but that didn't work. The buttons are appearing on top of each other. How can I get them side by side? Ideally I would like the slide downs to appear side by side and be able to click on each separately.

我尝试创建一个新的并尝试将其设置为显示:内联,但这不起作用。按钮显示在彼此之上。我怎么能并排得到它们?理想情况下,我希望滑动并排显示,并能够单独点击每个。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Slide Panel</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });


});
</script>

<style type="text/css">
body {
    margin: 0 auto;
    padding: 0;
    width: 200px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
    outline: none;
}
#panel {
    background: #754c24;
    height: 500px;
    display: none;
}

#about {
    background: #754c24;
    height: 500px;
    display: none;
}

.slide {
    margin: 0px 20%;
    padding: 0;
    border-top: solid 4px #422410;
    background: orange;
}
.btn-slide {
    background: url(images/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 100%;
    height: 31px;
    padding: 10px 10px 0 0;

    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}



</style>
</head>

<body>

<div id="panel">
    hi
</div>

<p class="slide"><a href="#" class="btn-slide">Button 1</a></p>

<div id="about">
    hi
</div>

<p class="slide"><a href="#" class="btn-slide">Button 2</a></p>

</body>
</html>

2 个解决方案

#1

1  

Just give the float:left attributes to the panels it solves....

只需将float:left属性赋予它所解决的面板....

if # panel and #about are responsible for the slider then add this css

如果#plate和#about负责滑块,则添加此css

#panel {
    background: #754c24;
    height: 500px;
    display: none;
    float:left;
}

#about {
    background: #754c24;
    height: 500px;
    display: none;
    float:left; ----> float attribute
}

The same attribute should be given to the buttons also to get them side by side

应该给按钮提供相同的属性以使它们并排

#2

0  

jsBin demo

jQuery:

$(function(){

    $(".btn-slide").click(function(e){
        e.preventDefault();
        $(this).closest('p').prev('.panel').slideToggle(800);
        $(this).toggleClass("active");
    });

});

HTML:

  <div id="sliders">
    <div>
      <div class="panel">Panel</div>
      <p class="slide"><a href="#" class="btn-slide">Button 1</a></p>
    </div>

    <div>  
      <div class="panel">About</div>
      <p class="slide"><a href="#" class="btn-slide">Button 2</a></p>
    </div>
  </div>

CSS:

/* ================== */
#sliders{
  display:table;
  width:100%;
}
#sliders > div{
 vertical-align:top;
  display:table-cell;
}
.panel{
    background: #754c24;
    height: 500px;
    display: none;
}

.slide {
    margin: 0px;
    padding: 0;
    border-top: solid 4px #422410;
    background: orange;
}
.btn-slide {
    background: url(images/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 100%;
    height: 31px;
    padding: 10px 10px 0 0;

    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}

#1

1  

Just give the float:left attributes to the panels it solves....

只需将float:left属性赋予它所解决的面板....

if # panel and #about are responsible for the slider then add this css

如果#plate和#about负责滑块,则添加此css

#panel {
    background: #754c24;
    height: 500px;
    display: none;
    float:left;
}

#about {
    background: #754c24;
    height: 500px;
    display: none;
    float:left; ----> float attribute
}

The same attribute should be given to the buttons also to get them side by side

应该给按钮提供相同的属性以使它们并排

#2

0  

jsBin demo

jQuery:

$(function(){

    $(".btn-slide").click(function(e){
        e.preventDefault();
        $(this).closest('p').prev('.panel').slideToggle(800);
        $(this).toggleClass("active");
    });

});

HTML:

  <div id="sliders">
    <div>
      <div class="panel">Panel</div>
      <p class="slide"><a href="#" class="btn-slide">Button 1</a></p>
    </div>

    <div>  
      <div class="panel">About</div>
      <p class="slide"><a href="#" class="btn-slide">Button 2</a></p>
    </div>
  </div>

CSS:

/* ================== */
#sliders{
  display:table;
  width:100%;
}
#sliders > div{
 vertical-align:top;
  display:table-cell;
}
.panel{
    background: #754c24;
    height: 500px;
    display: none;
}

.slide {
    margin: 0px;
    padding: 0;
    border-top: solid 4px #422410;
    background: orange;
}
.btn-slide {
    background: url(images/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 100%;
    height: 31px;
    padding: 10px 10px 0 0;

    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}
标签：

相关文章