如何在单击链接时阻止此下拉列表关闭？

Question

这是jsfiddle：

http://jsfiddle.net/2mtm8wo5/

由于我需要在单页面布局上使用它，我需要在单击链接时停止关闭下拉列表

的Javascript

//when I click dropdown menu
$('.sbr-dropdown').click(function(){
    //find list items
    $(this).find("ul").each(function(){
        //if dropdown is hidden, show it
        if ($(this).css('display') == 'none'){
            $(this).fadeIn("slow");
        }
        else //if dropdown is visible, hide it
        {
            $(this).fadeOut('slow');
        }

    });
});

HTML

   <div id="sbr">
        <div class="sbr-logo">Drop</div>
        <ul class="sbr-menu">
            <li class="sbr-item sbr-dropdown">Unsere Websites
                <ul class="sbr-submenu">
                    <li><a href="#seite1">Hansestadt Stralsund</a></li>
                    <li><a href="#seite2">Andere Alternative</a></li>
                    <li><a href="#seite3">Noch eine Seite</a></li>
                </ul>
            </li>
            <li class="sbr-item">Hansestadt</li>
            <li class="sbr-item sbr-dropdown">Einstellungen
                <ul class="sbr-submenu">
                    <li><a href="#seite1">Hansestadt Stralsund</a></li>
                    <li><a href="#seite2">Andere Alternative</a></li>
                    <li><a href="#seite3">Noch eine Seite</a></li>
                </ul>
            </li>
        </ul>
    </div>

只有在点击下拉列时

才需要关闭下拉列表

Answer 1

要在点击时停止fadeOut，您只需删除else条件：

$('.sbr-dropdown').click(function() {
    $(this).find("ul").each(function() {
        if ($(this).css('display') == 'none') {
            $(this).fadeIn("slow");
        }
    });
});

Example fiddle

或者，您可以[{1}}元素本身的点击事件stopPropagation：

a

Example fiddle

Answer 2

您需要使用以下命令停止向子元素传播事件：

$('.sbr-dropdown ul').click(function(e){
  e.stopPropagation();
});

<强> Demo