jQuery多个上下滑动div_Jquery_Slidetoggle

jQuery多个上下滑动div

jquery

jQuery多个上下滑动div,jquery,slidetoggle,Jquery,Slidetoggle,我找到了一个制作以下幻灯片面板的教程。我希望在屏幕顶部有多个向下滑动菜单我尝试创建一个新的，并尝试将其设置为display:inline，但没有成功。这些按钮彼此重叠出现。我怎样才能把它们并排放在一起？理想情况下，我希望幻灯片能够并排出现，并且能够分别单击每个幻灯片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

我找到了一个制作以下幻灯片面板的教程。我希望在屏幕顶部有多个向下滑动菜单

我尝试创建一个新的，并尝试将其设置为display:inline，但没有成功。这些按钮彼此重叠出现。我怎样才能把它们并排放在一起？理想情况下，我希望幻灯片能够并排出现，并且能够分别单击每个幻灯片

    <!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>


简易滑板
$（文档）.ready（函数（）{
$（“.btn幻灯片”）。单击（函数（）{
$（“面板”）。滑动切换（“慢速”）；
$（this）.toggleClass（“活动”）；返回false；
});
});
身体{
保证金：0自动；
填充：0；
宽度：200px；
字体：75%/120%Arial，Helvetica，无衬线；
}
a:焦点{
大纲：无；
}
#面板{
背景：754c24；
高度：500px；
显示：无；
}
#关于{
背景：754c24；
高度：500px；
显示：无；
}
.幻灯片{
利润率：0px20%；
填充：0；
边框顶部：实心4px#422410；
背景：橙色；
}
.btn幻灯片{
背景：url（images/whitearrow.gif）无重复右-50px；
文本对齐：居中；
宽度：100%；
高度：31px；
填充：10px 10px 0；
显示：块；
字体：粗体120%/100%Arial，Helvetica，无衬线；
颜色：#fff；
文字装饰：无；
}
.主动{
背景位置：右12px；
}
你好

你好

只需将float:left属性指定给它解决的面板

如果#面板和#关于负责滑块，则添加此css

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

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

同样的属性也应该赋予按钮，使它们并排出现

jQuery：

$(function(){

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

});

HTML:

谢谢你！谢谢你展示了如何走得更远，谢谢你！我还在学习css。我想我可以通过内联显示来实现这一点。浮子很好用

  <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>

/* ================== */
#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;
}