Geek Answers Handbook

Prevent jquery show / hide from adding inline style?

I have a case when I need to switch the visibility of an element based on whether a particular operation (categorization) is performed, if so, it is hidden, otherwise it is visible.

Now I have css that looks like this:

.isCategorizing .category.all {
   display:none;
}

ie, this means that the div with class (es) .category.allshould be hidden if the parent (s) has a class.isCategorizing

Now in jquery, if I switch the visibility of an element .category.all, an inline style is added to the HTML code that takes precedence over CSS in the .css file! Thus, even if this is true, the visibility value from the inline style seems to take precedence, and the element is NOT hidden. When jquery is visible, add style=display:list-item;to the div, while my CSS should make it hidden ...

I could handle this in pure jQuery, but there are too many states and checks to make sure it should work that way, and also support a boolean flag to “remember” if this state exists and whether to return to it ever. The CSS approach is simpler and much cleaner, but the inline style is an annoying bit ...

... how best to handle this? I tried to create another class .hideand switched it using jquery. This seems to work, but somehow pushes the positioning of my element. I play with this, but cannot find a clean solution to this problem. Any tips?

Update

Here is the relevant CSS:

.category{
        position:relative;
        padding:1px;
        margin:2px 0 5px 0;
        clear:both;
        font-family:arial, sans-serif;
        font-size: 14px;
        display:inline-block;
        width:inherit;
    }   


.category.all {
        display:none;
        width:200px;
        text-align: center;
        padding:3px;
        border:2px solid transparent;
        border-radius: 4px;
        background-color: #DDDFE3;
    }

: toggleClass - "" , , . -, .category, " ", , .

toggleClass , , ... lemme

+5
1

, :

  • .all, , ( , .isCategorizing)
  • .all, , , isCategorizing

, all partial. :

.category {
    display: none;
}

.category.partial {
    display: inline-block;
}

.isCategorizing .category.partial {
    display: none;
}

.all , , , .partial ( , .not-all, ). :

  • toggleClass('.not-all') , toggleClass('.all'),
  • display CSS , not-all
+2

More articles:


All Articles