Ошибка CSS в контекстном меню сценария jQuery

Я знаю, что мой вопрос слишком специфичен, но я не могу решить проблему.

Здесь моя демонстрация: http://jsfiddle.net/NWMST/ (вы увидите, что CSS имеет некоторые комментарии, вы можете игнорировать некоторые вещи...)

ПРОБЛЕМА: обратите внимание на меню по умолчанию, имеет закругленные углы (border-radius). Когда вы нажимаете на нее, чтобы вытащить меню, два верхних угла перестают иметь радиус границы. Однако, если вы нажмете еще раз, чтобы закрыть его, верхние углы остаются неизменными, без радиуса границы...

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

Учебник по растяжке, который я использовал: http://www.hongkiat.com/blog/responsive-web-nav/

Здесь разметка, стили и сценарии (однако, вы можете видеть, что это живое в демо, чтобы действительно увидеть, в чем проблема):

HTML MARKUP:

<nav id="menu">
 <ul>
 <li><a href="#" target="_blank">Home</a></li>
 <li><a href="#" target="_blank">About</a></li>
 <li><a href="#" target="_blank">Portfolio</a></li>
 <li><a href="#" target="_blank">Blog</a></li>
 <li><a href="#" target="_blank">Contact</a></li>
 </ul>
 <a href="#" id="pull" target="_blank">Menu</a>
</nav>

CSS:

#menu a {text-decoration: none; }
#menu ul {display: none; }
#menu {text-align: center; }

#menu #pull {
 display: block;
 position: relative;
 display: block;
 font: 700 19px/1.45em 'Open Sans', Arial, sans-serif;
 color: #2e2e2e;
 padding: 8px 0 6px;
 border: 1px solid #bdc4c7;
 background: #fff;
 -webkit-box-shadow: none;
 box-shadow: none;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}

/* the rule I'm using on the script */
#menu #pull.radius {
 -webkit-border-radius: 0 0 3px 3px;
 border-radius: 0 0 3px 3px;
}

#menu #pull i {
 font-size: 25px;
 padding-right: 10px;
}

#menu #pull:hover,
#menu #pull:focus,
#menu #pull:active {color: #04bfee; }

#menu {
 float: none;
 clear: both;
}

#menu li {
 float: none;
 margin: 0;
}

#menu li a {
 position: relative;
 display: block;
 font: 700 12px/1em 'Open Sans', Arial, sans-serif;
 text-transform: uppercase;
 color: #2e2e2e;
 padding: 8px 12px 6px;
 border: 1px solid #bdc4c7;
 border-bottom: 0 none;
 background: #fff;
 -webkit-box-shadow: none;
 box-shadow: none;
 -webkit-border-radius: 0;
 border-radius: 0;
}

#menu li a.current,#menu li a:hover,#menu li a:focus {
 color: #0abcff;
 border: 0 none;
 border: 1px solid #bdc4c7;
 border-bottom: 0 none;
 background: #fafafa;
 -webkit-box-shadow: none;
 box-shadow: none;
}

#menu li a.first-item {
 -webkit-border-radius: 3px 3px 0 0;
 border-radius: 3px 3px 0 0;
}

JQUERY SCRIPT:

$(function() {
 var pull = $('#pull');
 menu = $('#menu ul');
 menuHeight = menu.height();
 $(pull).on('click', function(e) {
 if($(this).is('.radius')) {$(this).removeClass('radius');}
 $(this).addClass('radius').siblings().removeClass('radius');
 e.preventDefault();
 menu.slideToggle();
 });
 });
 $(window).resize(function(){
 var w = $(window).width();
 if(w > 767 && menu.is(':hidden')) {
 menu.removeAttr('style');
 }
 });

Большое спасибо, ребята.

4 ответа

Это нормально: http://jsfiddle.net/NWMST/6/? Просто замените это:

if($(this).is('.radius')) {$(this).removeClass('radius');}
 $(this).addClass('radius').siblings().removeClass('radius');

с этим:

$(this).toggleClass('radius').siblings().removeClass('radius');


У вас есть несколько ошибок в вашем Javascript. Изменить:

if($(this).is('.radius')) {$(this).removeClass('radius');}
 $(this).addClass('radius').siblings().removeClass('radius');

в

if($(this).hasClass('radius')){
 $(this).removeClass('radius');
 }
 else{ 
 $(this).addClass('radius').siblings().removeClass('radius');
 }

Рабочий пример: http://jsfiddle.net/NWMST/4/

Ваши ошибки:

  1. Проверьте, имеет ли элемент класс с hasClass("radius") а is(".radius")
  2. Всегда добавляя радиус класса к элементу тяги


Используйте этот JavaScript:

$(function() {
 menu = $('#menu ul');
 menuHeight = menu.height();
 $('#pull').cklick(function() {
 menu.slideToggle();
 $('#pull').toggle(function() {
 $('#pull').animate({
 border-top-left-radius: '3px',
 border-top-right-radius: '3px'
 }, slow);
 }, function() {
 $('#pull').animate({
 border-top-left-radius: '0',
 border-top-right-radius: '0'
 }, slow);
 });
 });
});


добавьте это в свой css

#menu #pull.radius{border-radius:3px;}

licensed under cc by-sa 3.0 with attribution.