0

http://jsfiddle.net/waJzP/43/

機能の問題を分析します -

  1. [開く] (ステージ 1) をクリックしてから [さらに開く] (ステージ 2) をクリックし、[閉じる] をクリックすると、[さらに開く] (ステージ 2) は開いたままになります。ただし、[さらに開く] (ステージ 2) をクリックし、[さらに開く] (ステージ 3) をクリックしてから [閉じる] をクリックすると、すべて正常に閉じます。どうしてこれなの？

  2. 「画像を開く」が正常に閉じません。また、「さらに開く (ステージ 2)」と「さらに開く (ステージ 3)」が開いている場合は、開いている画像をクリックすると閉じます。しかし、そうではありません！

私はjqueryにとても慣れていないので、これはすべて非常に混乱しています!

$(document).ready(function() {
  $('.stage1').hide();  
    $("#stage1").click(function () {
      $(".stage1").toggle("slide", { direction: "right" }, 1000);
    });
    $('.stage2').hide();  
      $("#stage2").click(function () {
        $(".stage2").slideToggle();
        e.preventDefault();
      });
      $('.stage3').hide();  
      $("#stage3").click(function () {
        $(".stage3").slideToggle();
        e.preventDefault();
      });
    $('.photos').hide();  
      $("#photos").click(function () {
        $(".photos").slideToggle();
        e.preventDefault();
      });
         $("#showmap").click(function () {
          if ($('.stage2, .stage3').is(':hidden'))
             {$(".stage1").toggle("slide", { direction: "right" }, 1000); }
             else
             {
              $(".stage3").slideToggle();
              $(".stage2").slideToggle();
              $(".stage1").delay(1000).toggle("slide", { direction: "right" }, 1000);
             }
        });
});

----------------------------- HTML -------------------- ----------

<div id="stage1">Open</div>      
<div id="showmap">close (closes all)</div>
<div class="map-wrapper">

<img src="http://placehold.it/1000x300" width="100%">
<div class="stage1 map-main-slider">   <br>
<div id="stage2">open more</div>
<div id="photos"> Open Pictures (Should close stages 2 and 3 if open) </div>
</div>
</div>
<div>
</div>
<div class="photos" style="color:#FFFFFF;font-size:14px;text-align:center;">
<div> <br> <br> <br> I am Photos <br> <br> <br>  </div>
</div>
<div class="stage2" style="color:#FFFFFF;font-size:14px;text-align:center;">
<div id="stage3"> <br> <br> <br> Open More <br> <br> <br>  </div>
<div class="stage3" style="color:#FFFFFF;font-size:14px;text-align:center;"><br> <br> <br>I am More Infmation <br> <br> <br> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

--------------------------------- CSS

.map-wrapper{
  position: relative;
}

.map-main-slider {
    background-color: rgba(233, 233, 233, 0.96);
    background-image: url("/wordpress/wp-content/themes/penrose/img/noise.png");
    bottom: 0;
    height: 100%;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    width: 100%;
}
.map-inner {
  padding:4%
}

.stage2{
background:blue;

}

.stage3{
background:red;

}
.photos {background:green;}
4

1 に答える 1

0

Showmapで、チェックが正しくなかった場合は、最初の機能チェックをクリックします。私は以下のコードのように変更しました

$("#showmap").click(function () {
      if ($('.stage2').is(':hidden') && $('.stage3').is(':hidden'))
         {
             $(".stage1").toggle("slide", { direction: "right" }, 1000); }
         else
         {
          $(".stage3").slideToggle();
          $(".stage2").slideToggle();
          $(".stage1").delay(1000).toggle("slide", { direction: "right" }, 1000);
         }
    });

フィドルしてください

http://jsfiddle.net/waJzP/45/ ありがとう

于 2012-11-30T17:37:07.410 に答える