這個CSS/jQuery的組合

顯示/隱藏問題的工作完全正常。我可以點擊#business打開我的菜單，在關閉菜單的元素'html'外單擊，或者再次單擊#business。這個CSS/jQuery的組合

問題1：#business不會恢復到＃323232。

問題2：如果我點擊了新的菜單（#businessmenu）jQuery的隱藏它，裏面我怎麼能只通過點擊元素或#business切換外面躲呢？

的JavaScript：

$("#business").click(function(event){ 
    jQuery.fx.off = true; 
    $("#businessmenu").toggle(""); 
    $(this).css("background-color", "#000"); 
    event.stopPropagation(); 
}); 
$('html').click(function() { 
    $("#businessmenu").hide(); 
    $("#business").css("background-color", "#323232"); 
});

CSS：

header { 
    float: left; 
    background: #323232; 
    width: 98%; 
    padding: 0 1%; 
    color: #E9F1F4; 
} 

header a { 
    color: #e9f1f4; 
    font-size: 20px; 
    font-weight: bold; 
} 
header a:hover { 
    background: #000; 
    color: #fff; 
} 

header #business { 
    float: left; 
    position: relative; 
    padding: 10px 35px 13px 20px; 
} 

#businessmenu { 
    display: none; 
    background: #000; 
    width: 220px; 
    height: 200px; 
    position: absolute; 
    top: 60px; 
    left: 1%; 
    border-radius: 0 0 6px 6px; 
    padding: 10px 35px 13px 20px; 
}

HTML：

<a href="#" id="business">Name</a> 

<div id="businessmenu">    
    <a href="help.html">Help</a>     
</div>

來源

2012-02-15 Josh

嘗試設置一個http://jsfiddle.net – 2012-02-15 00:12:51

你在找什麼是您click事件stopImmediatePropagation和isImmediatePropagationStopped方法。

由於有更多的邏輯，而不是'togglin'，因爲如果你點擊外部，你不會觸發#business，你只是隱藏#businessmenu，強制切換意味着添加更多的邏輯。

下面是完整的工作示例的jsfiddle：http://jsfiddle.net/mG5vS/1

爲了您1日問題，我只是增加了一個if聲明單擊事件中：

$("#business").click(function(e){ 
    if($("#businessmenu").is(":hidden")) { 
     //...do things 
     e.stopImmediatePropagation(); //don't hide menu right after showing 
    } else { 
     hide(); //hide/revert to everything to initial state 
    } 
});

爲了您第二個問題我加那些停止事件傳播這樣功能：

$("#businessmenu").click(function(e){ 
    e.stopImmediatePropagation(); //don't hide when clicking menu links 
}); 

$('html').click(function(e) { 
    if(!e.isImmediatePropagationStopped()){ //Hide unless told not to 
     hide(); 
    } 
});

來源

2012-02-15 01:27:54

非常感謝！ – Josh 2012-02-15 07:21:48

還有與懸停在「#business」菜單再次隱藏後一個問題。它的工作原理，當你第一次加載頁面，而不是之後的菜單進行了展示和再次隱藏... – Josh 2012-02-15 07:43:32

@Josh我明白了，我只是固定它 – 2012-02-15 09:11:02

實際上，你可以使用切換用於切換CSS類被點擊的元素時

$('#business').toggle(function() { 
    $(this).addClass('toggled'); 
}, function() { 
    $(this).removeClass('toggled'); 
});

現在有示範:) http://jsfiddle.net/8CJnV/

來源

2012-02-15 00:23:10

很好的答案，但在jQuery中，你有toggleClass（）所以更容易 – MCSI 2012-02-15 00:30:06

正確...感謝您的信息。 – 2012-02-15 00:31:36

這個CSS/jQuery的組合

回答

相關問題