Question

我在我的虚拟网站中创建了一个花哨的jquery页面，并添加了一些动画，但问题是它的行为并不像我正在编程要做的那样。问题是，当我点击任何常见问题时，它会向下滑动，但当我再次点击它时，它应该向上滑动。我实现目标的一种方式，但后来我无法将减号更改为加号。以下是fiddlejs链接以查看行为：

SlideUp不起作用： https://jsfiddle.net/ocxv257t/

SlideUp有效，但＆＃34; - ＆＃34;标志没有返回＆＃34; +＆＃34;： https://jsfiddle.net/ocxv257t/1/

HTML CODE：

<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代码：

jQuery(document).ready(function($) {
    $('p.ans').hide();

    $('h5.q').click(function() {
        $(".minus").each(function(i) {
            $('h5.q').find("span").html("+ ").removeClass("minus").addClass("plus");
        });

        if($(this).find("span").hasClass("plus")){$(this).find("span").html("&ndash; ").removeClass("plus").addClass("minus"); $('p.ans').hide();}
        else{$(this).find("span").html("+ ").removeClass("minus").addClass("plus");}

        $('p.ans.' + $(this).attr('class').split(' ').join('.')).slideToggle();
    });
});

Answer 1

这是解决问题的更好，更简单的方法：

http://jsfiddle.net/ocxv257t/4/

简化jQuery：

$(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();
        }
    });
});

添加了CSS：

h5.q:before {
    content: "+";
}

h5.q.opened:before {
    content: "-";
}

Answer 2

使用您的代码解决方案

    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("&ndash; ").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();
                });
            });

Answer 3

假设您一次只想要一个打开的部分，这应该这样做：

$(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()==='+' ? '- ' : '+ ';
    });
  });
});

Fiddle

jQuery无法将元素滑回slideUp？

3 个答案: