Question

我知道我的问题有点过于具体，但我无法解决问题。

这是我的演示：http://jsfiddle.net/NWMST/ （你会看到CSS有一些评论，你可以忽略一些东西......）

问题：默认情况下会注意到菜单，有圆角（border-radius）。当您单击它以拉出菜单时，两个顶角停止具有border-radius。但是，如果再次单击，要关闭它，顶角保持不变，没有边框半径...

我已经在stackoverflow上找到了很多不同尝试的片段，但是在我寻找的解决方案中没有。我很抱歉这个问题，我理解jQuery只是为了操纵它，但我几乎无法编写自己的脚本。

我使用的拉动教程：http://www.hongkiat.com/blog/responsive-web-nav/

这是标记，样式和脚本（但是，您可以在演示中看到它实际上看到问题所在）：

HTML MARKUP：

<nav id="menu" class="clearfix">
  <ul class="clearfix">
    <li><a class="current first-item" href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <a href="#" id="pull">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');
    }
  });

非常感谢你们。

Answer 1

您的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/

你的错误：

检查元素是否包含hasClass("radius")而不是is(".radius")
始终将类半径添加到拉元素

Answer 2

可以吗：http://jsfiddle.net/NWMST/6/？
只需替换它：

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

用这个：

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

Answer 3

使用此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);
    });
  });
});

Answer 4

将此添加到您的css

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

拉菜单jQuery脚本上的CSS错误

4 个答案: