Click the Toggle icon method, jquery bootstrap method

Source: Internet
Author: User

I am the real dish, used for a long time, did not achieve their own effect, first, I think is the use of attr method to find the button when the change, the changes in the class properties of the icon to change, you can achieve this function, but there is a bug, I am taking all the button, There are all the span, in other words, I will be all the icons are switched, and can not switch back, the method is not very good, because I am directly transferred to the class method, no use of ID, because the ID is the only, so I this method is not reliable, can only later say

$ (document). Ready (function() {  $ ("button"). Click (function() {    $(" Span "). attr (' class ', ' Glyphicon glyphicon-minus pull-left ');   });

The way I wanted to be able to switch later

$ (document). Ready (function() {  $ ("#one1"). Click (function() {    $ ( "#one"). Toggleclass ("Glyphicon glyphicon-minus");  } );

The use of Toggleclass can be called repeatedly, start to implement this function, but found that there are two shortcomings, first, he needs a button and span two ID, need to call too much, and to write four times repeatedly, I think the master should not write so, I am still a rookie, But I don't want to use silly methods.

Then I consulted others, as if I could do it in another way.

$ (document). Ready (function() {  $ ('. Accordion-group '). Find (' span '). Click (function () {$ (this). Toggleclass (' glyphicon-plus-sign glyphicon-minus ')}) ;

But only the point icon, not the button, because the click event is only bound in span, so only the span, not to dom,button that level, so there is a problem, later in the modification

$ ('. accordion-heading '). Click (function() {$ (this). Find (' span '). Toggleclass (' Glyphicon-plus-sign Glyphicon-minus ')});

Experience today, the wheel is good, the key is to try to figure out their own wheels, can not be used in a simple way, so do not apply the effect, or have to think more, more ways to

Click the Toggle icon method, jquery bootstrap method

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.