关闭菜单单击关闭下拉菜单 - 两个下拉菜单

时间:2013-07-22 23:04:48

标签: javascript jquery html

所以我有两个并排的菜单,看起来像html

<ul id ="menu">

                    <?php if ($session->is_logged_in()) {    ?> 

                        <li class="menu"><img " alt="User Profile" title="My Profile" src="<?php echo getUserImage($id.".jpg"); ?>" /><a href="#"><?php echo $_SESSION['username']; ?></a>&nbsp;<img src="images/downtriangle.png" />
                            <ul id="dropdown">
                                    <li><a  href="profile.php">Profile</a></li>
                                    <li><a  href="#">Settings</a></li>
                                    <li><a  href="logout.php">Log out</a></li>
                                </ul>
                            </li>   

                    <?php } else { ?> 

                        <li class="menu"><a href="register.php">Sign up</a></li>
                        <li class="menu"><a href="login.php">Log in</a></li>

                    <?php } ?>

                       <li class="menu"><a href="#">More</a>&nbsp;<img src="images/downtriangle.png" />
                            <ul id="dropdown_m">
                                <li><a href="topusers.php">Users</a></li>
                                <li><a href="topitems.php">Top Lists</a></li>
                                <li><a href="justrated.php">The Stream</a></li>
                                href="faq.php">FAQ</a></li>
                                <li><a href="about.php">About</a></li>
                                <li><a href="privacy.php">Privacy</a></li>
                            </ul>
                        </li>

    </ul> 

我想在它们打开时关闭它们,然后点击屏幕外的任何地方,

这是我的javascript:

 $('html').click(function() {
    $('#dropdown').hide();
 })

 $('html').click(function() {
    $('#dropdown_m').hide();
 })


 $('#menu').click(function(e){
     e.stopPropagation();
 });

这会关闭左侧菜单(用户个人资料),但不会关闭正确的用户个人资料。谁能看到发生了什么?

1 个答案:

答案 0 :(得分:2)

你试过把它们放在一起吗?

 $('html').click(function() {
    $('#dropdown').hide();
    $('#dropdown_m').hide();
 });