多个jQuery幻灯片切换重叠

所以我是jQuery新手，发现了几个slideToggle示例，但它们都是重叠的。以下是我目前的代码：

jQuery：

<script src="jquery-1.9.1.js">
</script>
<script>
    $ (document).ready(function(){
        $("#about").click(function(){
    $("#aboutp").slideToggle("medium");
  });
});

</script>
<script>
    $(document).ready(function () {
        $("#discounts").click(function () {
            $("#discountsp").slideToggle("medium");

        });
    });

</script>
<script>
    $ (document).ready(function(){
        $("#news").click(function(){
    $("#newsp").slideToggle("medium");

  });
});

</script>

---

看看这是不是你要找的。您可以通过提供类来简化大量代码，所以一次单击处理程序就足够了

Html 更简洁的方法是提供一个

数据属性

，该属性具有目标的选择器

<div id="about" class="trigger" data-target="#aboutp">About Us</div>
<div id="aboutp" class="content">this is us bro</div>
<div id="discounts" class="trigger" data-target="#discountsp">Discounts</div>
<div id="discountsp" class="content">Dicounts...blah blah blah blah blah</div>
<div id="news" class="trigger" data-target="#newsp">News</div>
<div id="newsp" class="content">Here is the News!!</div>


$(document).ready(function () {
          $('.trigger').click(function(){
            var p = $(this).data('target'); //Get the selector of the target from data.
            $('.content').not(p).slideUp(); //slideup everything but not this content.
            $(p).slideToggle('medium'); //Toggle display of currently click element's respective content.
          });

      });

关于我们
这是我们兄弟
折扣
数字…等等等等等等
新闻
这是新闻！！
$（文档）.ready（函数（）{
$（'.trigger'）。单击（函数（）{
var p=$（this.data（'target'）；//从数据中获取目标的选择器。
$（'.content'）.not（p）.slideUp（）；//slideUp所有内容，但不包括此内容。
$（p）.slideToggle（'medium'）；//切换当前单击元素各自内容的显示。
});
});

---

非常感谢你。这对我帮助很大。没问题，又增加了一个方法。有很多方法。这些只是几个简单的例子。

#about,#discounts,#news {
    position: fixed;
    top: 100px;
    background-color:LightBlue;
    z-index: 11;

}
#about {
    right: 10px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;

}
#discounts {
    right: 150px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;

}
#news {
    right: 300px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

#newsp,#discountsp,#aboutp {
    top: 300px;
    right: 50px;
    position: fixed;
    display: none;
}

<div id="about" class="trigger">About Us</div>
<div id="aboutp" class="content">this is us bro</div>
<div id="discounts" class="trigger">Discounts</div>
<div id="discountsp" class="content">Dicounts...blah blah blah blah blah</div>
<div id="news" class="trigger">News</div>
<div id="newsp" class="content">Here is the News!!</div>

    $(document).ready(function () {
      $('.trigger').click(function(){
       var p = '#' + this.id + 'p'; //Get the id +p as your content's id to toggle.
        $('.content').not(p).slideUp(); //slideup everything but not this content.
        $(p).slideToggle('medium'); //Toggle display of currently click element's respective content.
      });

  });

<div id="about" class="trigger" data-target="#aboutp">About Us</div>
<div id="aboutp" class="content">this is us bro</div>
<div id="discounts" class="trigger" data-target="#discountsp">Discounts</div>
<div id="discountsp" class="content">Dicounts...blah blah blah blah blah</div>
<div id="news" class="trigger" data-target="#newsp">News</div>
<div id="newsp" class="content">Here is the News!!</div>


$(document).ready(function () {
          $('.trigger').click(function(){
            var p = $(this).data('target'); //Get the selector of the target from data.
            $('.content').not(p).slideUp(); //slideup everything but not this content.
            $(p).slideToggle('medium'); //Toggle display of currently click element's respective content.
          });

      });