JQuery CSS! Важно, измените css на клик

У меня есть раскрывающееся меню, которое расположено за пределами страницы (отрицательное поле) при нажатии кнопки. Я хочу, чтобы страница была нажата и появилось меню. Я использую CSS3 для достижения этой цели и прекрасно работаю.JQuery CSS! Важно, измените css на клик

Мой следующий шаг меню - сделать его более динамичным, я хочу использовать JQuery для установки значений полей, чтобы независимо от количества элементов в списке (в моем меню) поля соответственно обновлялись.

У меня очень близка к тому, что я работаю, у меня есть все математика, но у меня проблема при переключении класса css, чтобы изменить высоту. Чтобы заставить класс перезаписывать мои текущие стили, мне нужно использовать важное правило (нахмурившись, и я его ненавижу!), Во-первых, у меня возникли проблемы с использованием важного правила с JQuery (я читал дубликаты сообщений в это), но в идеале я хочу, чтобы добиться одинакового результата без использования! важно, какие-либо идеи?

Класс я переключая является .Body с переменой

код ниже:

<div id="menu"> 
    <ul> 
     <li><a href="#home" class="contentLink">Guide</a></li> 
     <li><a href="#home" class="contentLink">Contents</a></li> 
     <li><a href="#home" class="contentLink">Calculator</a></li> 
    </ul> 
</div> 



.body-change{margin-top:141px !important} 
.ui-page-active{ 
    -webkit-transition: margin-top 0.35s linear; 
    -moz-transition: margin-top 0.35s linear; 
    -o-transition: margin-top 0.35s linear; 
    -ms-transition: margin-top 0.35s linear; 
    transition: margin-top 0.35s linear; 
} 


$(function() { 
    var numItems = $("#menu ul").children().length, 
     height = $('#menu ul li').outerHeight(), 
     margin = numItems * height; 
     console.info('Margin is ' + margin + 'px'); 

     // Toggle menu 
     $('#menu').css('margin-top', -margin) 
     $('.body-change').css('margin-top', margin) 

     $("#sidemenu").on('click', function() { 
      $(".ui-page-active").toggleClass("body-change"); 
     }); 

});

Как показано в JQuery, я установил запас меню для правильного отрицательного значения на нагрузке. Затем я переключаю класс изменения тела, что мне нужно сделать, это установить css изменения тела в JQuery, но я изо всех сил стараюсь это сделать из-за важного правила, которое необходимо использовать.

Любые идеи?

источник

2013-03-14 woolm110

У какого элемента есть класс смены кузова? Я не вижу этого в вашем коде. – Terry

.ui-page-active получает класс после нажатия – woolm110

. '! Important' предназначен для предотвращения переопределения других стилей (включая встроенные стили). Вероятно, вам придется найти альтернативу. Почему «важно» нужно? И какой элемент имеет класс 'ui-page-active'? Было бы лучше, если бы вы могли написать скрипку. – Terry

После того, как у меня была такая же проблема, попробуйте следующее:

$("#SomeElement").css("cssText", "height: 650px !important;");

Важно сказать, что я не знаю, если это кросс-браузеры решение

источник

2013-03-14 13:56:41 BorisD

Не работает, я боюсь, но спасибо – woolm110

Не уверен, что если вы получили это выяснили еще, но так как на него не ответили, я опубликую то, что я сделал.

var bodyChange = $('.body-change'); 
var style = bodyChange.attr('style') + ' margin-top:' + margin + 'px !important;'; 
bodyChange.attr('style', style);

источник

2014-10-10 15:33:46

JQuery CSS! Важно, измените css на клик

ответ

Смежные вопросы