2

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

(about、discounts、news の最後にある 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;
}
4

1 に答える 1

0

これがあなたが探しているものかどうかを確認してください。クラスを提供することでかなり多くのコードを簡素化できるため、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.
      });

  });

デモ

よりクリーンなアプローチ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 に答える