Question

我有2个链接，都显示不同的div。我已经让它滑动了所有的罚款。但我需要它做的是折叠相反的切换（如果它打开）。与手风琴面板的工作方式类似（当您触发显示切换链接时，打开的面板会关闭，新触发的面板会打开）。

这是我正在使用的jQuery

//Left reveal toggle
$(".left-reveal-toggle").on("click", function () {
    $('.left-reveal-section').slideToggle("slow");
    $(".left-reveal-toggle").toggleClass("active");
});

//Right reveal toggle
$(".right-reveal-toggle").on("click", function () {
    $('.right-reveal-section').slideToggle("slow");
    $(".right-reveal-toggle").toggleClass("active");
});

这是一个有效的JSFiddle链接：http://jsfiddle.net/wq73aeuh/1/

//Left reveal toggle
$(".left-reveal-toggle").on("click", function() {
  $('.left-reveal-section').slideToggle("slow");
  $(".left-reveal-toggle").toggleClass("active");
});

//Right reveal toggle
$(".right-reveal-toggle").on("click", function() {
  $('.right-reveal-section').slideToggle("slow");
  $(".right-reveal-toggle").toggleClass("active");
});

.left-panel {
  min-height: 400px;
  background: #31b9ce;
  width: 50%;
  float: left;
  text-align: center;
}

.right-panel {
  min-height: 400px;
  background: #4f5cd6;
  width: 50%;
  float: left;
  text-align: center;
}

.left-panel-reveal {
  min-height: 400px;
  background: #31b9ce;
  width: 50%;
  float: left;
  text-align: center;
}

.right-panel-reveal {
  min-height: 400px;
  background: #4f5cd6;
  width: 50%;
  float: left;
  text-align: center;
}

.hide {
  display: none;
}

.clear {
  clear: both;
  font-size: 0px;
  line-height: 0px;
  display: block;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="left-panel">
  <a href="#" class="left-reveal-toggle">Read more form left panel</a>
</div>

<div class="right-panel">
  <a href="#" class="right-reveal-toggle">Read more from right panel</a>
</div>


<div class="clear"></div>


<div class="left-reveal-section hide">
  <div class="left-panel-reveal">left panel reveal content</div>
  <div class="right-panel-reveal">left panel reveal content</div>
</div>


<div class="right-reveal-section hide">
  <div class="left-panel-reveal">right panel reveal content</div>
  <div class="right-panel-reveal">right panel reveal content</div>
</div>

Answer 1

在右侧的功能顶部使用： $（＆＃39;。左，揭示节＆＃39;）。效果基本show（＆＃39;慢＆＃39;）; 左边的功能顶部： $（＆＃39; .right-揭示节＆＃39;）。效果基本show（＆＃39;慢＆＃39;）;

显示切换隐藏其他div jquery

1 个答案: