显示切换隐藏其他div jQuery

问题描述

我有2个链接都显示不同的div.我已经把它切换到幻灯片了.但是我需要它做的是折叠相反的触发器(如果它是打开的).类似于手风琴面板的工作原理(当您触发显示切换链接时，打开的面板关闭，而新触发的面板打开).

I have 2 links that both reveal different divs. I've got it slide toggling all fine. But what i need it to do is collapse the opposite toggle (if it's open). Similar to how an accordion panel works (when you trigger a reveal toggle link the open panel closes and the newly triggered panel opens).

这是我当前正在使用的jQuery

Here's the jQuery I'm currently using

//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/

Here's a working JSFiddle link: 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>

推荐答案

在右侧函数顶部使用: $('.left-reveal-section').slideUp('slow');左上方的功能: $('.right-reveal-section').slideUp('slow');

Use at the top of function in right: $('.left-reveal-section').slideUp('slow');And top of function in left: $('.right-reveal-section').slideUp('slow');

这篇关于显示切换隐藏其他div jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！