显示/隐藏div按钮

Question

我正在尝试使用jQuery做一个显示/隐藏菜单按钮。

菜单包含在div中，我试图设置一个按钮来显示和隐藏它。这是我的代码：

<div class="menu">
    <div id="items">
        <ul>
            <li>home</li>
            <li>about</li>
            <li>contact</li>
        </ul>
    </div>
        <p class="dismiss-btn" id="btn-hide"><i class="fa fa-bars"></i></p>
</div>

JS：

<script>
    //DOM loaded 
    $(document).ready(function() {
        // Hide the top info bar
        $('#btn-hide').click(function(){
            $("#items").toggle("slow"); 
        });
    });
</script>

问题是，当我点击按钮时，它隐藏了内容，然后再次显示它...任何想法我错了？

Answer 1

这对我来说很好，但有一件事你可以尝试：

$('#btn-hide').click(function(e){
    e.stopImmediatePropagation();
    $("#items").toggle("slow"); 
});

这将停止对该元素或父元素的任何其他“点击”。

http://api.jquery.com/event.stopimmediatepropagation/