Предотвращение показа / скрытия jquery от добавления встроенного стиля? - PullRequest
Новая
       7

Предотвращение показа / скрытия jquery от добавления встроенного стиля?

5 голосов
/ 11 сентября 2011

У меня есть случай, когда мне нужно переключить видимость элемента в зависимости от того, выполняется ли конкретная операция (категоризация), если это так, она скрыта, иначе она видна.

Теперь у меня есть css, которыйвыглядит следующим образом: 

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

т.е. это означает, что этот div с классом (ами) .category.all должен быть скрыт, если его родительский (ые) класс .isCategorizing

Теперьв jquery, если я переключаю видимость элемента .category.all, в HTML добавляется встроенный стиль, который имеет приоритет над CSS в файле .css !!Таким образом, даже если вышеупомянутое верно, значение видимости из встроенного стиля, кажется, имеет приоритет, и элемент НЕ скрыт.Будучи видимым, jquery добавляет style=display:list-item; к div, тогда как мой CSS должен сделать его скрытым ...

Я мог бы обработать это в чистом jQuery, но слишком много состояний и проверок, чтобы убедиться, что он должен работать втаким образом, а также поддерживать логический флаг, чтобы «помнить», существовало ли это состояние и возвращаться ли когда-либо в это состояние.Подход CSS проще и намного чище, но встроенный стиль раздражает ...

... как лучше с этим бороться?Я попытался создать другой класс .hide и переключил это с помощью jquery.Кажется, работает, но по какой-то причине портит положение моего элемента.Я играю с этим, но не могу найти чистого решения этой проблемы.Любой совет ??

Обновление :

Вот соответствующий 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 ипросто продублируйте реквизиты, это может сработать, если подумать ... Дай мне попробовать и выложить обновление

1 Ответ

2 голосов
/ 11 сентября 2011

После всех уточнений кажется, что:

  • Если кнопка имеет .all, вы хотите, чтобы она была скрыта (независимо от того, имеет ли родитель .isCategorizing)
  • Если кнопка не имеет .all, вы хотите, чтобы она была скрыта, если и только если родитель имеет isCategorizing

Если это так, то самое простое - изменить значение класса all и использовать вместо него класс partial. Затем вы можете сделать: 

.category {
    display: none;
}

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

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

Если удаление .all вызовет проблемы в другом коде, который вы здесь не показываете, вы можете продолжать его использовать, а также ввести .partial (в этом случае я бы предпочел, чтобы он был назван .not-all, чтобы отношение было более очевидно для сопровождающих). Вы можете сделать это:

  1. Добавление toggleClass('.not-all') в одно или два места, где у вас уже есть toggleClass('.all') и
  2. Перемещение display установщиков стиля CSS внутри новых селекторов, которые будут запускаться новым not-all классом
...