2

So I am new to jQuery and have found a couple examples of slideToggle but all of them are overlapping. Here is my code so far:

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>

(the p at the end of about, discounts, and news are basically the information or paragraph divs that will get hidden and shown when the others get clicked)

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

1 回答 1

0

看看这是否是您正在寻找的。您可以通过提供类来简化很多代码，因此一键处理程序就足够了。

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

  });

演示

一种更简洁的方法可能是提供一个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.
          });

      });

演示

于 2013-05-22T02:47:40.410 回答