Question

所以我是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">About Us</div>
        <div id="aboutp">this is us guys</div>
        <div id="discounts">Discounts</div>
        <div id="discountsp">Dicounts...blah blah blah blah blah</div>
        <div id="news">News</div>
        <div id="newsp">Here is the News!!</div>

（关于结尾处的p，折扣和新闻基本上是隐藏的信息或段落div，并在其他人被点击时显示）

CSS：

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

Answer 1

看看这是否是你要找的。您可以通过提供类来简化相当多的代码，因此单击处理程序就足够了。

HTML

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

JS

    $(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.
      });

  });

Demo

更简洁的方法可能是提供具有目标选择器的data-attribute。

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

      });

多个jQuery slidetoggle重叠

1 个答案:

HTML

JS

Demo

Demo