拉菜單jQuery腳本的CSS錯誤

我知道我的問題有點太具體，但我無法解決問題。拉菜單jQuery腳本的CSS錯誤

這裏是我的演示：http://jsfiddle.net/NWMST/ （你會看到CSS有一些評論，你可以忽略一些東西......）

問題：通知THT默認菜單，有圓角（境-半徑）。當你點擊它來拉出菜單時，兩個頂部角落停止具有邊界半徑。然而，如果你再次點擊，關閉它，頂部角落保持不變，沒有邊界半徑...

我已經做了很多不同的嘗試，我在這裏找到的代碼片段在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'); 
    } 
    });

非常感謝你們。

來源

2013-07-21 Santiago Baigorria

這是正確的：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-21 15:59:56 Cherniv

真棒謝謝！我嘗試了類似的東西，我刪除了if，但是我沒有更改添加的切換...令人驚訝的是，一個小小的單詞可以改變整個事情！謝謝，很好的回答 –

@Santz太棒了，歡迎你！ – Cherniv

添加到您的CSS

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

來源

2013-07-21 15:56:56

你必須在你的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")
總是加上類半徑拉力構件

來源

2013-07-21 15:59:07 Horen

偉大的答案，我翻閱起來。我選擇切爾諾夫只是因爲它更加壓縮！但偉大的反正！來自阿根廷，Santz的問候 –

使用這個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-21 21:07:17 camelCaseNick

拉菜單jQuery腳本的CSS錯誤

回答

相關問題