无法通过单击使 slideToggle 正常工作
Cannot get slideToggle to work properly with click
https://jsfiddle.net/xdehhkdk/4/
这个问题研究了一段时间,终于来stack求助了。
我的目标是让用户点击某人的名字,然后向下滑动他们相应的生物,这确实有效。
问题是,当您再次单击它时,简历应该会向上滑动。相反,它只是再次滑落。现在我意识到这可能是因为我有
$('.expanded-bio').hide();
在点击功能中,但删除该行无助于解决我的问题。我仍然需要在同一个点击功能中以某种方式隐藏其他生物。
非常感谢任何帮助!
您需要将点击的 .expanded-bio
排除在初始隐藏之外。
$('.expanded-bio').hide();
$('.management-member').click(function() {
// remove active class from other elements
$('.management-member.active').not(this).removeClass('active');
// toggle active class of clicked element
$(this).toggleClass('active');
// craete the corresponding `.expanded-bio` object of clicked
var thisBio = $('.expanded-bio[data-bio=' + this.id + ']');
// hide other `.expanded-bio`
$('.expanded-bio').not(thisBio).hide();
// toggle the corresponding
thisBio.slideToggle('fast');
});
$('.expanded-bio').hide();
$('.management-member').click(function() {
$('.management-member.active').not(this).removeClass('active');
$(this).toggleClass('active');
var thisBio = $('.expanded-bio[data-bio=' + this.id + ']');
$('.expanded-bio').not(thisBio).hide();
thisBio.slideToggle('fast');
});
.management-member {
background: white;
border: 2px black dashed;
padding: 20px;
margin: 0 20px 20px;
width: 100px;
float: left;
}
.management-member:hover {
cursor: pointer;
}
.expanded-bio {
background: lightgreen;
clear: both;
margin-bottom: 10px;
padding: 20px;
}
.BAD .expanded-bio {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="management-member active" id="hdean">
<span class="active-overlay"></span>
<div class="management-info">
<h3 class="management-title">Holly D. Deem, CFA</h3>
</div>
</div>
<div class="management-member active" id="jsmith">
<span class="active-overlay"></span>
<div class="management-info">
<h3 class="management-title">John Smith</h3>
</div>
</div>
<div class="row">
<div class="large-12 columns expanded-bio bio-row" data-bio="hdean" style="display: block;">
<h3 class="management-title">Holly D. Deem, CFA</h3>
</div>
</div>
<div class="row BAD">
<div class="large-12 columns expanded-bio bio-row" data-bio="jsmith" style="display: block;">
<h3 class="management-title">John Smith</h3>
</div>
</div>
https://jsfiddle.net/xdehhkdk/4/
这个问题研究了一段时间,终于来stack求助了。
我的目标是让用户点击某人的名字,然后向下滑动他们相应的生物,这确实有效。
问题是,当您再次单击它时,简历应该会向上滑动。相反,它只是再次滑落。现在我意识到这可能是因为我有
$('.expanded-bio').hide();
在点击功能中,但删除该行无助于解决我的问题。我仍然需要在同一个点击功能中以某种方式隐藏其他生物。
非常感谢任何帮助!
您需要将点击的 .expanded-bio
排除在初始隐藏之外。
$('.expanded-bio').hide();
$('.management-member').click(function() {
// remove active class from other elements
$('.management-member.active').not(this).removeClass('active');
// toggle active class of clicked element
$(this).toggleClass('active');
// craete the corresponding `.expanded-bio` object of clicked
var thisBio = $('.expanded-bio[data-bio=' + this.id + ']');
// hide other `.expanded-bio`
$('.expanded-bio').not(thisBio).hide();
// toggle the corresponding
thisBio.slideToggle('fast');
});
$('.expanded-bio').hide();
$('.management-member').click(function() {
$('.management-member.active').not(this).removeClass('active');
$(this).toggleClass('active');
var thisBio = $('.expanded-bio[data-bio=' + this.id + ']');
$('.expanded-bio').not(thisBio).hide();
thisBio.slideToggle('fast');
});
.management-member {
background: white;
border: 2px black dashed;
padding: 20px;
margin: 0 20px 20px;
width: 100px;
float: left;
}
.management-member:hover {
cursor: pointer;
}
.expanded-bio {
background: lightgreen;
clear: both;
margin-bottom: 10px;
padding: 20px;
}
.BAD .expanded-bio {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="management-member active" id="hdean">
<span class="active-overlay"></span>
<div class="management-info">
<h3 class="management-title">Holly D. Deem, CFA</h3>
</div>
</div>
<div class="management-member active" id="jsmith">
<span class="active-overlay"></span>
<div class="management-info">
<h3 class="management-title">John Smith</h3>
</div>
</div>
<div class="row">
<div class="large-12 columns expanded-bio bio-row" data-bio="hdean" style="display: block;">
<h3 class="management-title">Holly D. Deem, CFA</h3>
</div>
</div>
<div class="row BAD">
<div class="large-12 columns expanded-bio bio-row" data-bio="jsmith" style="display: block;">
<h3 class="management-title">John Smith</h3>
</div>
</div>