Блог

У меня есть следующие настройки css:

 .dropdown dt { background:#e4dfcb !important; }
.dropdown-disabled { background:#dddddd important; color:#aaaaaa; }
  

Итак, в моем html-коде я намеренно поместил класс с отключенным выпадающим списком, который должен принудительно переопределить цвет фона… но этого не происходит.

 <dt id="dtTestID" class="dropdown-disabled">
   <a href="#"><span>Hello World</span></a>
</dt>
  

Что я делаю не так? Тьфу…

Редактировать:

Хорошо, я обновил код до следующего:

 .dropdown-enabled { background:#e4dfcb; }
.dropdown-disabled { background:#dddddd; }

.dropdown dt { background:#e4dfcb !important url(arrow.png) no-repeat scroll right center; }
.dropdown dt a { display:block; padding-right:20px; border:1px solid #d4ca9a; width:150px;}
.dropdown dt a:hover { color:#ffffff; border: 1px solid #d0c9af;}
.dropdown dt a span { color:#816c5b; cursor:pointer; display:block; padding:5px; }
.dropdown dt a span:hover { color:#ffffff; cursor:pointer; display:block; }

<dt id="dtTestID" class="dropdown-disabled"><a href="#"><span>Hello World</span></a></dt>
  

Это работает для фона, мне просто нужно включить выпадающий список везде. Однако теперь я сталкиваюсь с другой (похожей) проблемой, я не могу переопределить стиль ссылки. Я попробовал следующее…

Переопределяем цвет на !важно, и устанавливаем для моего отключенного новый цвет.

.выпадающий список dt a span { цвет: #816c5b !важно; курсор: указатель; дисплей: блок; отступ: 5 пикселей; } .выпадающий список-отключен { фон: #dddddd; цвет:#ааааааа; }

Есть идеи?

В CSS нет important модификатора, просто !important . Попробуйте это:

 .dropdown dt { background:#e4dfcb }
.dropdown-disabled { background:#dddddd !important; color:#aaaaaa; }
  

Надеюсь, это поможет.

Найден обходной путь… Мне пришлось удалить ссылку из моего dt, затем обновить мой css следующим:

 .dropdown-enabled { background:#e4dfcb; }
.dropdown-disabled span { background:#dddddd; color:#aaaaaa; }
  

После этого мне нужно использовать jQuery для отслеживания щелчка мыши на другом элементе, чтобы вручную переключиться на включено … и снова вставить ссылку обратно.

 var dt = jQ(this).find("dt");
// put back the look of enabled the element
dt.removeClass("dropdown-disabled");
dt.addClass("dropdown-enabled");

// put back the link in there to trigger the dropdown
var newhtml = jQ('<a href="#"></a>').append(dt.html());
dt.html(newhtml);