Question

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

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

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

Answer 1

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

如果＃panel和#about负责滑块，则添加此css

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

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

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

Answer 2

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

jQuery多个向下滑动div

2 个答案:

jsBin demo