0

タイトルがクリックされるまでdivを非表示にするこのコードを作成しただけで、完全に機能します.3つのdivが互いに下にあり、最初のdivを展開したいだけです.展開する新しいもの。私のJqueryは以下です

$(function(){
    $('.drop-dwn').click(function(){
        $(this).next('.slide1').slideToggle(300);
        return false;
    });
});

私のHTMLマークアップは次のとおりです。

<div class="slide-panels">
                    <h4 class="drop-dwn">Oil & Gas</h4>
                        <div class="slide1">
                            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
                            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
                            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
                        </div>
                    <h4>SAP & Enterprise Solutions</h4>
                        <div class="slide2">
                            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
                            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
                            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
                        </div>
                    <h4>IT & Change Management</h4>
                        <div class="slide3">
                            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
                            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
                            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
                        </div>
                     </div>
4

2 に答える 2

0 
<div class="slide-panels">
    <h4 class="drop-dwn">Oil & Gas</h4>
        <div class="first slide1">
            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
        </div>
    <h4 class="drop-dwn">SAP & Enterprise Solutions</h4>
        <div class="slide1">
            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
        </div>
    <h4 class="drop-dwn">IT & Change Management</h4>
        <div class="slide1">
            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
            <div class="checkbox"><input type="checkbox" name="" value=""> All</div>
        </div>
</div>​

jQuery:

$('.first').slideDown(300);
$(function(){
 $('.drop-dwn').click(function(){
    $('.slide1').slideUp(300);
    $(this).next('.slide1').slideToggle(300);
    return false;
 });
});​

CSS:

.slide1{
  display:none;
 }​

デモ

于 2012-09-26T10:16:53.467 に答える
0

トリックは、すべての div を上にスライドさせてから、クリックした div を下にスライドさせることです。

したがって、すべての div に「パネル」のような共通のクラスを与え、

$('.drop-dwn').click(function(){
   var _this = this;
   $(".panel").slideUp("fast", function() {
      $(_this).slideDown("fast");
   });
});
于 2012-09-26T10:19:40.200 に答える