jQuery无法将元素滑回slideUp？
我在我的虚拟站点中创建了一个奇特的jquery页面，并添加了一些动画，但问题是它的行为与我编程时的不同。问题是，当我点击任何faq问题时，它会向下滑动，但当我再次点击时，它会向上滑动。有一种方法我实现了目标，但后来我无法将负号改回正号。 以下是指向fiddlejs的链接，以查看行为：jQuery无法将元素滑回slideUp？,jquery,Jquery,我在我的虚拟站点中创建了一个奇特的jquery页面，并添加了一些动画，但问题是它的行为与我编程时的不同。问题是，当我点击任何faq问题时，它会向下滑动，但当我再次点击时，它会向上滑动。有一种方法我实现了目标，但后来我无法将负号改回正号。 以下是指向fiddlejs的链接，以查看行为： jQuery(document).ready(function($) { $('p.ans').hide(); $('h5.q').click(functio
jQuery(document).ready(function($) {
$('p.ans').hide();
$('h5.q').click(function() {
if($(this).find("span").hasClass("plus")){
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
$(this).find("span").html("– ").removeClass("plus").addClass("minus"); $('p.ans').hide();
}
else{
$(this).find("span").html("+ ").removeClass("minus").addClass("plus");
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
}
$('p.ans.' + $(this).attr('class').split(' ').join('.')).slideToggle();
});
});
jQuery(document).ready(function($) {
$('p.ans').hide();
$('h5.q').click(function() {
if($(this).find("span").hasClass("plus")){
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
$(this).find("span").html("– ").removeClass("plus").addClass("minus"); $('p.ans').hide();
}
else{
$(this).find("span").html("+ ").removeClass("minus").addClass("plus");
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
}
$('p.ans.' + $(this).attr('class').split(' ').join('.')).slideToggle();
});
});
jQuery(document).ready(function($) {
$('p.ans').hide();
$('h5.q').click(function() {
if($(this).find("span").hasClass("plus")){
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
$(this).find("span").html("– ").removeClass("plus").addClass("minus"); $('p.ans').hide();
}
else{
$(this).find("span").html("+ ").removeClass("minus").addClass("plus");
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
}
$('p.ans.' + $(this).attr('class').split(' ').join('.')).slideToggle();
});
});
<h1 style="text-align: center;margin-top: 60px;border-top: 1px solid #f0f0f0;padding-top: 60px;">Frequently asked questions</h1>
<div class="span6">
<div class="first">
<div class="">
<h5 class="q 1"><span class="plus">+ </span>How do I register myself as a seller on Something.com?</h5>
<p class="ans q 1">In order to register, please fill a simple registration form above. We will respond to you after reviewing your information at the earliest.</p>
<h5 class="q 2"><span class="plus">+ </span>What are the charges of Sell on something program?</h5>
<p class="ans q 2">Listing of products on something.com is absolutely free. something does not charge anything to you for listing your catalogue online.
You only pay a small commission for what you sell. The commission structure is shared and agreed with you at the time of registration.
</p>
<h5 class="q 3"><span class="plus">+ </span>Who can sell on something.com?</h5>
<p class="ans q 3">To sell on something.com you should be able to meet following criteria: You should be authorised to sell in UAE You can only sell new &
genuine products through something.com You can be any of the following: Manufacturer, Wholesaler, Distributor, Retailer There are few exceptions
to the rule for which you may contact us.
</p>
<h5 class="q 4"><span class="plus">+ </span>What products can I sell on something.com?</h5>
<p class="ans q 4">You can sell items in the following categories: Baby Products, Beauty, Books, Consumer Electronics (including Cameras and Video Games - Consoles),
Digital Accessories (including Mobile Accessories, Electronics Accessories and PC Accessories), Home, Jewellery, Kitchen, Luggage, Mobile Phones,
Movies, Music, Personal Care Appliances, Personal Computers, Tablets, Toys, Video games (consoles and games), Watches, Furniture & Home Furnishings,
Stationeries, Men & Women Clothing, Men & Women Accessories (Footwear, Bags, Sunglasses, Perfumes), Health & Sport Accessories (Nutritions,
Medicines, Exerciser, Treadmills, Cricket Bat etc), Automotive. Further detailed categories can be seen on our home page. More categories are
coming soon. Please Contact Us to know more.
</p>
<h5 class="q 5"><span class="plus">+ </span>I don't have a website, can I still sell on something.com?</h5>
<p class="ans q 5">You don't need a website to start selling on something.com. All you would have to do is list your products on something and start selling.</p>
</div>
</div>
</div>
<div class="span6">
<div class="third">
<div class="">
<h5 class="q 6"><span class="plus">+ </span>How do I list my products on something.com?</h5>
<p class="ans q 6">Once the registration process is complete our team will work closely with you to create your online catalogue. You will also be given access to
online panels through which you can easily manage your listings.
</p>
<h5 class="q 7"><span class="plus">+ </span>How does selling on something.com work?</h5>
<p class="ans q 7">Selling on something.com is very easy. First you list the products that you want to sell on something.com marketplace. Customer sees your product
and makes a purchase. You will receive an email to ship the product. You deliver the product to the customer and confirm shipment. something will
deposit the funds into your selected bank account (as per the payment term) after deducting its fees.
<h5 class="q 8"><span class="plus">+ </span>Can I sell outside UAE through something.com?</h5>
<p class="ans q 8">No. At this time, something.com allows shipments only within UAE.</p>
<h5 class="q 9"><span class="plus">+ </span>If I list my products on something.com, will the customer know that he or she is purchasing from me on something.com?</h5>
<p class="ans q 9">We will clearly indicate on our product detail pages and offer listing pages that the product is sold by you and the invoice will carry your name.</p>
<h5 class="q 10"><span class="plus">+ </span>Can I cancel my subscription?</h5>
<p class="ans q 10">You are free to cancel anytime.</p>
</div>
</div>
</div>
jQuery(document).ready(function($) {
$('p.ans').hide();
$('h5.q').click(function() {
if($(this).find("span").hasClass("plus")){
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
$(this).find("span").html("– ").removeClass("plus").addClass("minus"); $('p.ans').hide();
}
else{
$(this).find("span").html("+ ").removeClass("minus").addClass("plus");
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
}
$('p.ans.' + $(this).attr('class').split(' ').join('.')).slideToggle();
});
});
以下是一个更好、更简单的解决方案：
jQuery(document).ready(function($) {
$('p.ans').hide();
$('h5.q').click(function() {
if($(this).find("span").hasClass("plus")){
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
$(this).find("span").html("– ").removeClass("plus").addClass("minus"); $('p.ans').hide();
}
else{
$(this).find("span").html("+ ").removeClass("minus").addClass("plus");
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
}
$('p.ans.' + $(this).attr('class').split(' ').join('.')).slideToggle();
});
});
$(document).ready(function() {
var opened = false;
$("h5.q").click(function() {
// Close other questions
$("h5.q").not($(this)).removeClass("opened");
$(".ans").slideUp();
if($(this).hasClass("opened")) {
// Close clicked question
$(this).removeClass('opened');
$(this).next(".ans").slideUp();
} else {
// Open clicked question
$(this).addClass('opened');
$(this).next(".ans").slideDown();
}
});
});
jQuery(document).ready(function($) {
$('p.ans').hide();
$('h5.q').click(function() {
if($(this).find("span").hasClass("plus")){
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
$(this).find("span").html("– ").removeClass("plus").addClass("minus"); $('p.ans').hide();
}
else{
$(this).find("span").html("+ ").removeClass("minus").addClass("plus");
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
}
$('p.ans.' + $(this).attr('class').split(' ').join('.')).slideToggle();
});
});
h5.q:before {
content: "+";
}
h5.q.opened:before {
content: "-";
}
jQuery(document).ready(function($) {
$('p.ans').hide();
$('h5.q').click(function() {
if($(this).find("span").hasClass("plus")){
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
$(this).find("span").html("– ").removeClass("plus").addClass("minus"); $('p.ans').hide();
}
else{
$(this).find("span").html("+ ").removeClass("minus").addClass("plus");
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
}
$('p.ans.' + $(this).attr('class').split(' ').join('.')).slideToggle();
});
});
假设您一次只需要打开一个分区，则应该这样做：
$(function() {
$('p.ans').hide();
$('h5.q').click(function() {
var p= $(this).next('p'),
span= $(this).find('span');
$('.ans').not(p).slideUp();
p.slideToggle();
$('h5.q > span').not(span).text('+ ');
span.text(function(_,t) {
return t.trim()==='+' ? '- ' : '+ ';
});
});
});
jQuery(document).ready(function($) {
$('p.ans').hide();
$('h5.q').click(function() {
if($(this).find("span").hasClass("plus")){
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
$(this).find("span").html("– ").removeClass("plus").addClass("minus"); $('p.ans').hide();
}
else{
$(this).find("span").html("+ ").removeClass("minus").addClass("plus");
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
}
$('p.ans.' + $(this).attr('class').split(' ').join('.')).slideToggle();
});
});
解决方案与您的代码
jQuery(document).ready(function($) {
$('p.ans').hide();
$('h5.q').click(function() {
if($(this).find("span").hasClass("plus")){
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
$(this).find("span").html("– ").removeClass("plus").addClass("minus"); $('p.ans').hide();
}
else{
$(this).find("span").html("+ ").removeClass("minus").addClass("plus");
$("h5").each(function(i) {
$('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
});
}
$('p.ans.' + $(this).attr('class').split(' ').join('.')).slideToggle();
});
});
在第二个JSFIDLE文件中，一切正常。此外，-变为+是，只要单击同一个问题，它就可以工作，但当我第一次单击一个问题，然后第二次单击另一个问题时，第一个“-”不会返回到“+”。这是关闭的，但不能关闭打开的部分。解决方案中也是同样的问题，slideUp并没有最小化这个问题。@RickHitchcock现在工作得很好，我更新了代码和JSFIDLE！