Изменение css свойств родителя onfocus:last-child
 

Доброго времени суток, есть такая конструкция:
#header nav ul li
Нужно что бы при клике (:focus) на #header nav ul li:last-child у #header изменилось свойство width
Есть какие идеи?

karakym,
Пример текущего глянуть есть ?
В принципе или какие-нидь хитрые велосипеды, или скрипт, посколь напрямую свойства родителя через css не правятся (исключая ИЕ)

Как такого примера нет, есть сайт на котором нужно это сделать!
Вы поймете что такое #header
Его width Нужно поменять на 100%
что бы при клике сайдбар вылез на всю страницу!

karakym,
А что после ? Ну выдвинется она на мгновение, и сразу перезагрузиться страница - фокус потерян... ?

В начало body, после этого скрипта:

<script type="text/javascript">
$(document).ready(function(){
 $('.spoiler_links').click(function(){
  $(this).parent().children('div.spoiler_body').toggle('normal');
  return false;
 });
});
</script>

Поставьте такой:

<script type="text/javascript">
$(document).ready(function(){
$('#nav ul>li>a').click(function (){
   $('#header').css({'width':'100%'});
});});
</script>

Deff,
Мне предложили такой вариант выполнения: https://jsfiddle.net/vv6e8786/1/
Но там не работает transition
Поэтому жму "+"
И еще вопрос, как бы сделать проверку на предмет нажатия кнопки ну типа

var clck = 0
$(...).click() {
if(clck == 1) {
clck = 0
$(#header).css(...)
...

Ну короче: при повторном нажатии стили меняются обратно (я с синтаксисом на ВЫ)

Вот мой модифицированный код:

$(document).ready(function(){
$('#nav ul>li>a').click(function (){
   $('#header').css({'width':'100%'});
   $('#header').removeClass('hov');
   $('#nav').css({'opacity':'0', 'visibility':'hidden'});
   $('#logo').css({'text-align':'center', 'margin-top':'100px'});
   $('#logo h1').css({'font-size':'2em'});
   $('#logo p').css({'font-size':'1em'});
   $('body').css({'overflow':'hidden'});
});});

Да бы не думали что я ленюсь, вот что у меня получилось:

$(document).ready(function(){
var clck = 0;
$('#nav ul>li>a').click(function (){
   if(clck == 0) {
   clck = 1;
   $('#header').css({'width':'100%'});
   $('#header').removeClass('hov');
   $('#nav').css({'opacity':'0', 'visibility':'hidden'});
   $('#logo').css({'text-align':'center', 'margin-top':'100px'});
   $('#logo h1').css({'font-size':'2em'});
   $('#logo p').css({'font-size':'1em'});
   $('body').css({'overflow':'hidden'});
} elseif(clck == 1) {
   clck = 0;
   $('#header').css({'width':'*stand*'});
   $('#header').addClass('hov');
   $('#nav').css({'opacity':'1', 'visibility':'visible'});
   $('#logo').css({'text-align':'right', 'margin-top':'auto});
   $('#logo h1').css({'font-size':'*stand*'});
   $('#logo p').css({'font-size':'*stand*'});
   $('body').css({'overflow':'auto'});
}
});});

Там где указал *stand* нужно поставить исходные значение (которые были до первого нажатия), потому что у меня адаптивность потеряется.
П.С. Где то в глубине мозга, в участках памяти про javascript и jquery я понимаю что это будет не то что надо, но может все же ошибаюсь!?