0

私の質問が少し具体的すぎることはわかっていますが、問題を解決できません。

ここに私のデモがあります: http://jsfiddle.net/NWMST/ (CSS にいくつかのコメントがあることがわかりますが、いくつかは無視できます...)

問題:デフォルトでは、メニューの角が丸くなっていることに注意してください (border-radius)。クリックしてメニューを引き出すと、上部の 2 つの角の境界半径がなくなります。ただし、もう一度クリックして閉じると、上隅は同じままで、境界線の半径はありません...

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

JQUERY スクリプト:

  $(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 に答える