0

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

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

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

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

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

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

HTML 标记：

<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;
}

查询脚本：

  $(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

4 回答 4

3

您的 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. 始终将类半径添加到拉元素
于 2013-07-21T15:59:07.033 回答
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');
于 2013-07-21T15:59:56.333 回答
1

使用这个 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);
    });
  });
});
于 2013-07-21T21:07:17.890 回答
0

将此添加到您的CSS

#menu #pull.radius{border-radius:3px;}
于 2013-07-21T15:56:56.303 回答