2

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

我尝试创建一个新的并尝试将其设置为 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>
4

2 回答 2

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
}

按钮也应赋予相同的属性以使它们并排

于 2012-11-03T09:26:48.683 回答
0

jsBin 演示

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;
}
于 2012-11-03T09:44:51.930 回答