Question

需要一些帮助，我需要在标签交替打开时关闭div，或者一个标签可以打开而其他标签会自动关闭

这是我刚从某人那里得到的fiddle

HTML：

<div class="siteMap">
 <div class="mapButton"></div>
 <div class="theMap" style="background:red;">content here</div>
</div>
<div class="siteMap" style="margin-top:70px;">
 <div class="mapButton"></div>
 <div class="theMap" style="background:blue;">content here</div>
</div>

<小时/>的 JAVASCRIPT：

$('.mapButton').click(function() {
  var mapPos = parseInt($(this).parent('.siteMap').css('left'), 10);
  if (mapPos < 0) {
    $(this).parent('.siteMap').animate({
      left: '+=200'
      }, 458, 'swing', function() {
        // Animation complete.
      });
  }
  else {
    $(this).parent('.siteMap').animate({
      left: '-=200'
      }, 458, 'swing', function() {
        // Animation complete.
    });
  } 
});

<小时/>的 CSS：

.siteMap {
  width:200px;
  position:fixed;
  left:-200px;
  top:0px;
  display:block;
  color:#FFF;
  z-index:2;
  opacity: 0.95;
}
.siteMap .mapButton {
  display:block;
  color:#333;
  background-color:#ACACAC;
  height:50px;
  width:50px;
  text-align:center;
  position:absolute;
  left: 200px;
  cursor:pointer;
}
.siteMap .theMap {
  width:100%;
  height:100px;
  background-color:#666;
  position:relative;
}

以下是fiddle

Answer 1

尝试

$('.mapButton').click(function () {
    var $siteMap = $(this).parent('.siteMap');
    var mapPos = parseInt($siteMap.css('left'), 10);
    if (mapPos < 0) {
        $siteMap.animate({
            left: '+=200'
        }, 458, 'swing', function () {
            // Animation complete.
        });
    } else {
        $siteMap.animate({
            left: '-=200'
        }, 458, 'swing', function () {
            // Animation complete.
        });
    }
    $('.siteMap').not($siteMap).filter(function () {
        return parseInt($(this).css('left'), 10) == 0
    }).animate({
        left: '-=200'
    }, 458, 'swing', function () {
        // Animation complete.
    });
});

演示：Fiddle

如何交替显示滑动div

1 个答案: